Rive and Lottie: ship interactive animation inside real apps

Videos of animations are useful for presentations, but products need animations that run inside the app: a like button that bursts when tapped, an onboarding illustration that reacts to swipes, a loader that changes when data arrives. Lottie and Rive are the two most common ways to ship this kind of motion, and this course teaches both.

What you will learn

We start by understanding how each format works and when to choose it. Then you will build animations in both, export them and run them on the web, with notes for iOS, Android and Flutter.

• Design After Effects animations that export cleanly to Lottie
• Optimise Lottie files and use the dotLottie format
• Build animations in the Rive editor with timelines, bones and constraints
• Create Rive state machines with inputs, listeners and transitions
• Connect animations to real app events and data
• Keep file sizes small and respect reduced motion settings

Projects

You will build three production style pieces: an animated like button with a hover and burst state, an onboarding illustration that responds to the current step, and a loading character that switches between waiting, success and error states.

The course suits designers who already animate a little and want their work to ship, and front end developers who want to understand what designers hand them. Basic knowledge of After Effects helps for the Lottie section; the Rive editor is taught from the start. Rive plans and features change often, so I point to the current documentation where details depend on your plan.