Lottie Animation

The bridge from After Effects to product: vector animation shipped as JSON (or zipped .lottie), tiny and resolution-independent, played by a runtime on web, iOS, Android, and React Native. This skill covers integrating, controlling, and exporting Lottie.

When to use

• Ship a designer's AE animation to web/iOS/Android/React Native
• Looping illustrations, onboarding, empty states, animated icons
• Scroll-driven or interaction-driven vector playback (hover, click, cursor)
• Runtime theming/recoloring instead of re-exporting per brand

Formats: .json vs .lottie

• .json — the raw Bodymovin output. Human-readable, larger.
• .lottie — a zipped container (often 60–80% smaller) that can bundle multiple animations, images, and theming. Preferred for shipping. Player: @lottiefiles/dotlottie-web (modern, canvas + WASM) supersedes the older lottie-web.

Prefer the dotLottie runtime for new work; use lottie-web only for legacy .json + SVG renderer needs.

Core workflow (web, dotLottie)