Animations with Lottie and Rive

Why Are Animations Important in Digital Products?

Animation is not decoration — it is a communication language. When the user presses a button and sees a confirmation animation, it makes them feel that the action was actually completed. When they see a friendly loading animation, they tolerate the wait more. Animations transform a dry digital experience into a lively and enjoyable one.

But the traditional problem was that animations were difficult to implement. The designer creates amazing animations in After Effects, and then the developer has to rebuild them in code — and usually the result does not look like the original design. This is where tools like Lottie and Rive emerged to solve this problem.

These tools allow the designer to export animations directly in a format that runs in the application or website without the developer needing to build them from scratch. The result: animations that come out exactly as the designer created them, in a very small file size.

What is Lottie?

Lottie is an open-source library developed by Airbnb in 2017. It works as follows:

1. The designer creates an animation in Adobe After Effects
2. They export it as a JSON file using a plugin called Bodymovin
3. That file runs in any application or website using the Lottie library

Lottie advantages:

• Very small file size: a Lottie file is much smaller than a GIF or video. A 5-second animation can be as small as 10KB
• High quality: because it is vector-based, it displays with excellent quality at any screen size
• Great performance: runs at 60 fps smoothly
• Supports all platforms: Web, iOS, Android, React Native, Flutter
• Controllable with code: developers can control animation speed, pause it, play it on a specific event

Lottie drawbacks:

• Requires After Effects for design (not an easy tool)
• Not all After Effects features are supported — some things do not export well
• Interactivity is limited compared to Rive
• Not suitable for very complex animations or games

What is Rive?

Rive (formerly called Flare) is a specialized animation design tool. Instead of designing in After Effects and exporting, you design the animation directly in the Rive Editor.

Rive advantages:

• Built-in design tool: no need for After Effects — you design and animate in the same tool
• State Machine: the most powerful feature in Rive — you can create interactive animations that change based on user input
• Smaller file size than Lottie: Rive files are usually smaller than equivalent Lottie files
• Very fast runtime: Rive runs directly on the GPU, so performance is excellent
• Free for personal use: the tool itself is free, and the runtime is open source

Rive drawbacks:

• A relatively new tool — the community is smaller than Lottie's
• You have to learn a new tool from scratch
• Some advanced features require a paid subscription
• Not all developers are familiar with it

Lottie vs Rive: When to Use Each

Use Lottie when:

• You have a motion design designer already working in After Effects
• You need simple, non-interactive animations (loading, success, error)
• The project needs quick and uncomplicated animations
• Your team is already familiar with Lottie
• You want a ready-made animation library from LottieFiles

Use Rive when:

• You need interactive animations that change based on user actions
• You want to create moving character animations or mascots
• You need a State Machine — animations that transition between different states
• You want to design and animate in one tool without After Effects
• Performance is very important (simple games or many animations on one page)

Quick comparison:

Feature	Lottie	Rive
Design tool	After Effects	Rive Editor
Interactivity	Limited	Advanced (State Machine)
File size	Small	Smaller
Performance	Excellent	Better
Community	Large	Growing
Ease of learning	Moderate	Relatively easy

Practical Uses of Animation in Products

1. Onboarding Illustrations
The first screens in an app that explain the features. Instead of static images, use short animations that demonstrate each feature. This increases engagement and reduces skip rates.

2. Loading States
Instead of a boring spinner, use custom animations that reflect the brand. Uber for example shows a car animation moving when you request a ride.

3. Empty States
When a page is empty (no messages, no notifications), a friendly animation improves the experience and can guide the user to take action.

4. Success/Error States
Instead of a text message "Success," a green checkmark animation gives the user a sense of achievement. And a red X animation clearly shows the error.

5. Pull-to-Refresh
Lottie and Rive let you create custom, enjoyable pull-to-refresh animations instead of the default spinner.

6. Interactive Icons
Icons that animate when you tap them — like a hamburger menu transforming into an X, or a heart icon filling up.

7. Gamification Elements
Reward and achievement animations in applications that have gamification.

Implementing Lottie in Practice

For web (HTML/JavaScript):
The simplest method is using the lottie-player web component:

<script src="https://unpkg.com/@lottiefiles/lottie-player/dist/lottie-player.js"></script>
<lottie-player src="animation.json" background="transparent" speed="1" loop autoplay></lottie-player>

For React:

import Lottie from 'lottie-react';
import animationData from './animation.json';

function MyComponent() {
  return <Lottie animationData={animationData} loop={true} />;
}

Practical steps:

1. Design the animation in After Effects or download it from LottieFiles.com
2. Export it as a JSON file
3. Add the appropriate library for your platform
4. Run the animation with control over speed and looping

Performance tips:

• Keep the JSON file as small as possible — reduce the number of layers and keyframes
• Use lottie-light if you do not need all the features
• Load the animation lazily if it is not in the viewport
• Avoid large animations above the fold

Implementing Rive in Practice

For web:

<script src="https://unpkg.com/@rive-app/canvas"></script>
<canvas id="rive-canvas" width="500" height="500"></canvas>
<script>
  new rive.Rive({
    src: 'animation.riv',
    canvas: document.getElementById('rive-canvas'),
    autoplay: true,
  });
</script>

For React:

import { useRive } from '@rive-app/react-canvas';

function MyComponent() {
  const { RiveComponent } = useRive({
    src: 'animation.riv',
    autoplay: true,
  });
  return <RiveComponent />;
}

State Machine in Rive:
The most powerful feature in Rive is the State Machine. Imagine you are creating a button:

• Default state: the button is still
• Hover: the button glows slightly
• Press: the button pushes inward
• Loading: the button shows a loading animation
• Success: the button transforms into a checkmark

You can do all of this in the Rive Editor without code, and the developer only connects the events to the states.

Performance and Experience Optimization

Animations can negatively impact performance if not optimized. Here are some important rules:

General rules:

• Minimize file sizes: animations under 50KB are ideal. Anything above 200KB, ask whether you really need it
• Use Lazy Loading: load the animation when it is close to the viewport
• Avoid large animations on mobile: mobile has fewer resources than desktop
• Test on weak devices: not all users have the latest iPhone

Lottie optimizations:

• Use the LottieFiles optimizer tool to reduce file sizes
• Reduce the number of shapes and paths
• Avoid complex expressions in After Effects
• Use the canvas renderer instead of the SVG renderer for complex animations

Rive optimizations:

• Rive automatically runs on the GPU so performance is better
• Use the WASM runtime for optimal performance on the web
• Reduce the number of bones in mesh deformation
• Test the State Machine with all possible states

Accessibility and Animations

Not all users can comfortably handle animations. Some people have motion sensitivity (vestibular disorders) and animations can cause them dizziness or headaches.

How to make animations accessible:

• Respect prefers-reduced-motion: if the user has enabled this setting, reduce or stop the animations
• Make animations non-essential: information must get through even without animations
• Avoid flashing: anything that flashes more than 3 times per second can cause problems
• Provide a way to stop animations: a pause button or option in settings

@media (prefers-reduced-motion: reduce) {
  .animation-container {
    animation: none;
  }
}

Resources for Ready-Made Animations

You do not have to design everything from scratch. There are large libraries of ready-made animations:

For Lottie:

• LottieFiles.com: the largest library — thousands of free and paid animations
• IconScout: has a large section of Lottie animations
• Motion Elements: professional animations

For Rive:

• Rive Community: the community shares open files
• Rive Examples: official examples from Rive
• GitHub: many repos with open Rive files

Tip: even if you use ready-made animations, customize them for your brand. Change the colors at least so they match your design system.

Summary

Lottie and Rive have changed how we handle animations in digital products. It is now possible to add professional animations with small file sizes and high performance without the developer needing to build everything in code.

If you are starting out, begin with Lottie — the library is larger and the community is more mature. Download ready-made animations from LottieFiles and use them in your project. When you need more interactivity or want to design animations from scratch with a tool easier than After Effects, try Rive.

The important thing to remember is that animation is a means, not an end. The goal is always to improve the user experience — not to impress them. A simple animation in the right place is much better than complex animations everywhere.