Animation is one of the easiest things to add to a product and one of the easiest to overdo. Used well, it makes an interface easier to understand and more pleasant to use. Used badly, it makes people wait for a logo to finish spinning. The difference is purpose.
Good reasons to animate
Motion earns its place when it does a job:
- Explaining change. A panel sliding in shows where it came from and where it will go.
- Giving feedback. A button that reacts instantly confirms the tap registered.
- Showing progress. A loading animation tells people the app hasn't frozen.
- Directing attention. A subtle movement draws the eye to something new.
- Adding character. A small, well-timed moment of delight, like a success animation after checkout.
If an animation doesn't do one of these things, question whether it needs to exist.
How long should an interface animation be?
Interface animations should feel quick. Most transitions work well at a few hundred milliseconds; much longer, and people start waiting for the interface instead of using it. Save longer, more expressive motion for moments people only see occasionally.
Easing matters as much as duration. Movement that starts quickly and settles gently feels natural. Movement at a constant speed feels mechanical.
When is Lottie the right choice?
Lottie plays vector animations, usually designed in After Effects, as lightweight files in apps and on websites, instead of heavy video. It's excellent for:
- empty states and onboarding illustrations
- success, error and loading moments
- animated icons
It's less suited to core interface transitions, which are better handled by the platform's own animation tools. And Lottie files can still get heavy when an animation is complex, so check file sizes and test playback on older phones.
Performance first
Smooth animation depends on animating the right properties. Transforms and opacity are cheap for browsers and phones to animate. Animating layout properties like width, height or position can cause stutter. Pause animations that are off-screen, and avoid running lots of them at once.
Respect reduced motion
Some people feel dizzy or unwell from on-screen movement, and iOS, Android and desktop operating systems all let them ask for less of it. Honour that setting (on the web, it's the prefers-reduced-motion media query): swap large movements for simple fades, or no animation at all. On our own website, every animation checks this setting first.
Test with fresh eyes
An animation you've watched a hundred times while building it feels normal. Ask someone new to use the product and watch whether the motion helps them understand it or just slows them down.
Purposeful motion is part of how we approach product design for apps and websites alike.
- #Animation
- #Motion design
- #Lottie
- #Performance
- #Accessibility