How to Add Lottie Animations to Your App with Claude Code (2026)

Lottie animations - vector motion graphics exported from After Effects or LottieFiles and played back at any size - are the standard for high-quality app animations. The lottie skill (69,141 installs, 25,570 GitHub stars, skills.sh registry) is how Claude Code learns to integrate them correctly.

Key takeaways

• lottie is the top dedicated motion-asset skill in the catalog: 69,141 installs, 25,570 GitHub stars (skills.sh registry)
• Covers web (lottie-web), React (react-lottie, lottie-react), React Native (lottie-react-native), and iOS/Android
• Pairs with web-artifacts-builder (67,753 installs) for animating UI components
• The Skillselion catalog tracks 64,904 skills across 82,301 listings with 97.8M total installs
• For GSAP and CSS scroll animations, see the companion guides: web-animation-framer-motion-gsap-guide and css-scroll-animations-vs-gsap-claude-code-2026

What does the lottie skill teach Claude Code?

The lottie skill (69,141 installs) loads the knowledge needed to correctly integrate .json Lottie files into any JavaScript environment: the lottie-web API (loadAnimation, playback controls, event hooks), React component wrappers (lottie-react, react-lottie), performance optimizations (preloading, renderer choice - SVG vs Canvas vs HTML), and accessibility markup (prefers-reduced-motion guards). Without the skill, Claude Code produces syntactically correct but semantically brittle Lottie code.

What is Lottie and why use it over CSS animations?

Lottie is an open-source animation library by Airbnb that renders JSON-based vector animations at any resolution without quality loss. Compared to CSS animations:

• Fidelity - Lottie plays After Effects exports exactly, including easing curves, blending, and per-layer control; CSS animations approximate these
• File size - a 5-second brand animation runs 40-80 KB as Lottie JSON vs 500 KB+ as GIF or video
• Interactivity - Lottie lets you scrub, reverse, and segment-play at runtime; useful for scroll-driven and gesture-driven interactions

For purely CSS-based motion, see the CSS scroll animations vs GSAP guide. For Framer Motion and GSAP, see the web animation guide.

How do I add a Lottie animation to a React app with Claude Code?

Install the skill then ask Claude Code to integrate a specific .json file:

skills install lottie

Claude Code will scaffold the lottie-react component, handle the JSON import, configure playback options (loop, autoplay, speed), and add a prefers-reduced-motion media-query guard so the animation respects user accessibility preferences - a common omission in manual integrations. See the accessibility audit guide for the broader WCAG context.

How do I animate UI components (not standalone Lottie files)?

For animating existing React components - mount/unmount transitions, hover states, scroll reveals - use web-artifacts-builder (67,753 installs, skills.sh registry) paired with Framer Motion. Lottie is optimized for asset playback (brand animations, loading states, illustrations); Framer Motion is better for component transitions. See the web animation Framer Motion guide for that path.

Which Lottie renderer should I use?

The lottie skill encodes renderer trade-offs:

• SVG renderer - best for quality, accessibility, and DOM interaction; use for most cases
• Canvas renderer - better performance for complex animations or when rendering many instances simultaneously; use for animation-heavy dashboards
• HTML renderer - CSS-transform-based; fastest but lowest fidelity; use only when SVG causes performance issues on low-end devices

A complete animation starter stack

1. lottie - JSON vector animation playback (69,141 installs) 2. web-artifacts-builder - component UI motion (67,753 installs) 3. frontend-design - design judgment layer (563,791 installs) 4. Reference: web-animation-framer-motion-gsap-guide for GSAP/Framer patterns 5. Reference: design/animation hub for the full animation skills cluster

Common pitfalls

• Missing prefers-reduced-motion - always guard Lottie playback; skip this and your animation runs for users who have explicitly asked devices to reduce motion
• Using the HTML renderer by default - the lottie-web default in some wrappers is html; explicitly set renderer: 'svg' for quality-first work
• Loading large JSON files synchronously - Lottie JSON files can be 100-500 KB; lazy-load them on component mount rather than bundling them into the main chunk

For the full motion tool comparison, visit the animation design hub - it tracks every animation skill in the Skillselion catalog.

Common questions