Lottie Animations

Render After Effects animations on the web with Lottie. Integrates lottie-react and lottie-web, controls playback and segments, syncs animation to scroll or state, and optimizes JSON payloads for performance.

This skill helps you ship designer-made motion using Lottie. It embeds lottie-react components, controls play/pause/segment and speed imperatively, drives frames from scroll position or app state, swaps colors dynamically, lazy-loads animation JSON, and reduces file size with dotLottie and compression for fast loads.

When to use

Use when embedding After Effects / LottieFiles animations, building animated icons and loaders, scroll-synced hero motion, or interactive onboarding illustrations in a web app.

Examples

Scroll-synced animation

Drive Lottie frames from scroll

Embed a Lottie animation with lottie-react and map its playback frame to the page scroll position so it plays as the user scrolls the hero section

Interactive animated icon

Play a segment on hover

Create an animated menu icon with Lottie that plays a specific segment forward on hover and reverses on mouse leave