Demystifying

Animations

Animations

Transitions

Hover me!

Comparing animation

implementations

Video & GIFs

  • Requires little to no additional work for designers to handover
  • Easy to implement for developers
  • Relatively easy to deal with different device sizes
  • Large filesize (2.2MB in this case)
  • Higher framerate/resolution requires higher filesize
  • Hard to implement transparency
  • Contained to a box
  • Interactivity is basically non existent

Lottie files

  • Easy to implement for developers
  • Relatively easy to deal with different device sizes
  • Smooth, maintains framerate on different speeds
  • Can render to vectors, decoupling resolution from filesize
  • Handles transparency like a champ
  • Small filesize
  • Can be a bit harder/restrictive for designers to work with
  • Contained to a box
  • Limited interactivity
Dia example

Code

  • Requires little to no additional work for designers to handover
  • Smooth, can easily leverage high framerates, specially on screens with fast refresh rates
  • Can be fully interactible
  • Handles transparency like a champ
  • Small filesize
  • Easier to deal with dynamic properties and content, such as scrolling, page transitions, shared animations between components, editable content, etc.
  • Can be quite hard to implement for developers
  • ...and it takes time
  • Also harder to deal with different screen sizes

Which one is the best?

There's no such thing!