How to Add Animation to UI

Good UI animation isn't decoration. It communicates state changes, guides attention, and makes interactions feel responsive. Bad animation does the opposite: it slows people down, distracts, and makes a product feel like a tech demo instead of a tool.

Here's how to add animation that actually improves your UI.

Start with purpose, not polish

Every animation should answer one question: what does this help the user understand? If you can't answer that clearly, cut the animation.

The three legitimate reasons to animate something in a UI:

• Feedback. A button press, a toggle switch, a form submission. The animation confirms "yes, that worked."
• Orientation. A page transition, a sidebar sliding in, a modal appearing. The animation shows where things came from and where they went.
• Attention. A notification badge, a skeleton loader, a progress bar. The animation says "look here" or "wait, something is happening."

If your animation doesn't fall into one of these categories, it's decorative. Decorative animation has a place (onboarding, marketing pages, empty states), but it should be used sparingly in functional UI.

Get the fundamentals right

Two properties matter more than anything else: easing and duration.

Easing determines how an animation accelerates and decelerates. Linear motion (constant speed) looks mechanical and unnatural. Use ease-out for elements entering the screen, ease-in for elements leaving, and ease-in-out for elements that move within the viewport.

Duration should be fast enough that it doesn't feel sluggish, slow enough that the user can track it. For most UI transitions, 150ms to 300ms is the sweet spot. Micro-interactions like button presses should be 100ms to 150ms. Page transitions can stretch to 400ms.

A common mistake: making animations too slow. If your users are performing the same action dozens of times a day, a 500ms animation becomes infuriating by the third hour. Keep it snappy.

Choosing your animation tool

Your tool choice depends on what you're animating and where it needs to run.

Rive is the best option for interactive, state-driven animations. Its state machine editor lets you build animations that respond to user input (hover, click, scroll) without writing animation code. Rive exports lightweight runtimes for web, iOS, Android, and Flutter. If you're building a product with complex interactive animations, Rive is the right choice.

LottieFiles is ideal for lightweight, looping animations like loading spinners, success checkmarks, and illustrated icons. Designers create them in After Effects, and the Lottie format renders them as vector animations at a fraction of the file size of GIFs or video. The LottieFiles marketplace has thousands of pre-built animations you can customize.

Framer handles scroll-based animations and page transitions well if you're already building your site in Framer. Its animation controls are tightly integrated with the layout engine.

ProtoPie excels at prototyping complex multi-screen animations before development. It's not a production tool, but it's excellent for exploring and communicating animation ideas to engineers.

Try Rive for interactive animations

When animation hurts UX

Animation becomes a problem when it violates user expectations. Specifically:

Don't animate navigation. If a user clicks a nav link, show the new page immediately. A 400ms slide transition between pages feels slick the first time and agonizing the hundredth time.

Don't animate things the user didn't trigger. Auto-playing carousels, bouncing CTAs, pulsing elements. These are attention-hostile patterns. The user didn't ask for movement; you're forcing it on them.

Respect prefers-reduced-motion. Some users have vestibular disorders. Others just find animation distracting. Always check the prefers-reduced-motion media query and disable non-essential animation when it's set.

Implementing animation in production

For CSS transitions and simple keyframes, you don't need a library. CSS handles opacity, transform, and color transitions natively with good performance.

For more complex sequences, GSAP (GreenSock Animation Platform) is the industry standard JavaScript animation library. It's free for most uses and handles timeline sequencing, scroll-triggered animations, and complex easing curves.

For Lottie animations, use the lottie-web player or the @lottiefiles/react-lottie-player component. For Rive, use the official @rive-app/react-canvas runtime. Both render on canvas for smooth performance.

Recommended tools

Rive for interactive, stateful animations that ship to production. LottieFiles for lightweight motion graphics and icon animations. Framer if animation is part of your site-building workflow. ProtoPie for prototyping complex interactions before committing to implementation.

Browse LottieFiles animations

Start simple. One well-timed fade is better than ten over-engineered transitions. Add animation to solve a specific UX problem, test it with real users, and cut anything that doesn't earn its keep.