skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

lottie-animations

Implement After Effects JSON animations in web and React applications using Lottie libraries.

Updated Jun 30, 2026
Search Tags:#React#animation#lottie#After Effects#dotlottie#web animations#bodymovin
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill lottie-animations-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie-animations
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/lottie-animations
Command: npx skills add https://github.com/ayofemiade/cleva --skill lottie-animations-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Rendering designer-created After Effects animations on the web requires converting them into performant, interactive formats, and developers often struggle with library selection, file size bloat, memory leaks, and framework integration. ## Core Features & Use Cases - Library Integration Patterns: Provides working code for lottie-web, @lottiefiles/dotlottie-web, dotlottie-react, lottie-react, Vue, and Svelte, covering playback controls, event listeners, scroll-driven and hover-triggered animations. - Performance Optimization: Covers dotLottie compression, Canvas vs SVG renderer selection, Web Worker offloading with DotLottieWorker, lazy loading, and mobile devicePixelRatio tuning. - After Effects Export Guidance: Details Bodymovin plugin settings, supported features, and file size optimization so designer exports render correctly. - Use Case: A designer hands you a 400KB JSON export for a loading animation. Use this Skill to convert it to dotLottie format, render it with DotLottieReact, add play/pause controls, and clean up the instance on unmount to avoid memory leaks. ## Quick Start Use the lottie-animations skill to add the attached animation.lottie file to my React hero section with autoplay, looping, and a pause button.

Frequently Asked Questions about lottie-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a Lottie animation to a React app?▼

Install @lottiefiles/dotlottie-react and render the DotLottieReact component with a src pointing to your .lottie or .json file, plus loop and autoplay props. Use dotLottieRefCallback to get the instance for programmatic play, pause, and seek controls.

What is the difference between lottie-web, lottie-react, and dotlottie-web?▼

lottie-web is the original Airbnb library supporting SVG, Canvas, and HTML renderers. lottie-react is a React wrapper around it with interactivity hooks. dotlottie-web is the modern LottieFiles library using the compressed .lottie format with Web Worker support.

Should I use JSON or dotLottie format for production animations?▼

Use dotLottie (.lottie) for production because ZIP compression reduces file size by up to 90% and supports multiple animations and themes in one file. JSON remains useful for development since it is human-readable and widely supported.

Why does my Lottie animation stutter or drop frames?▼

Stuttering usually comes from complex SVG rendering on the main thread. Switch to the Canvas renderer, use DotLottieWorker to offload rendering to a Web Worker, lower devicePixelRatio on mobile, or simplify the After Effects composition.

Which After Effects features are not supported by Lottie export?▼

Layer effects like drop shadows and glows, 3D layers, cameras, lights, adjustment layers, and time remapping do not export. Blending modes, expressions, and track mattes have partial support, so convert effects to shape layers and test exports early.

How do I prevent memory leaks with Lottie in React?▼

Call dotLottie.destroy() in the useEffect cleanup function when the component unmounts, and remove every event listener added with addEventListener. Failing to do either leaves instances and handlers alive after unmount.

Related Skills

Explore More Software Engineering Skills→
guaderramaguaderrama

lottie-animations

Render After Effects animations in real-time on web and React applications.

Community
Intermediate
pradeepmoulipradeepmouli

axiom-uikit-animation-debugging

Diagnoses CAAnimation timing issues including handlers, durations, and frame-rate jank.

Community
Advanced
sixscripts-aisixscripts-ai

lottie-animations

Implement After Effects Lottie animations in web and React applications.

Community
Advanced
ricardocidalericardocidale

3d-graphics

Integrate Three.js 3D scenes and framer-motion animations into web applications.

Community
Intermediate