skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

lottie-animations

Implement dotLottie animations in web, React, and Next.js projects.

Updated Aug 26, 2026
Search Tags:#theming#react#next.js#animation#lottie#dotlottie#web worker
One-click install
npx skills add https://github.com/aungpwint/presentation --skill lottie-animations-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie-animations
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/lottie-animations
Command: npx skills add https://github.com/aungpwint/presentation --skill lottie-animations-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @lottiefiles/dotlottie-web, @lottiefiles/dotlottie-react, and includes references (resource) components.

What problem does it solve? Adding Lottie animations to web projects involves many decisions—choosing between dotlottie-web and dotlottie-react, handling SSR in Next.js, optimizing performance with Web Workers, and enabling interactivity—and getting any of these wrong leads to janky playback or broken builds. ## Core Features & Use Cases - Runtime Selection & Setup: Guidance on choosing between @lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react, with installation and basic implementation patterns for vanilla JS and React. - Performance Optimization: Web Worker offloading with DotLottieWorker, worker grouping via workerId, lazy loading, auto-freeze configuration, and devicePixelRatio tuning. - Interactivity & Theming: State machine events and inputs, theme application per the dotLottie 2.0 spec, and dynamic slot overriding for colors, text, gradients, and vectors at runtime. - Use Case: A Next.js developer needs a branded loading animation that respects dark mode. The Skill provides the SSR-safe dynamic import pattern, DotLottieWorker setup, and setColorSlot calls to swap theme colors at runtime. ## Quick Start Add a looping Lottie animation to my React component using dotLottie and make it render off the main thread.

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 URL, autoplay, and loop props. Use the dotLottieRefCallback prop to get the underlying DotLottie instance for programmatic control like play, pause, or setFrame.

dotlottie-web vs dotlottie-react: which should I use?▼

Use @lottiefiles/dotlottie-web for framework-agnostic code, direct canvas control, and the smallest bundle. Use @lottiefiles/dotlottie-react when building React apps that benefit from a declarative component API and automatic lifecycle cleanup on unmount.

How do I use Lottie animations in Next.js without SSR errors?▼

dotLottie requires browser APIs, so load it with next/dynamic and set ssr: false. Import DotLottieReact inside the dynamic loader callback so the component only renders on the client.

How do I improve Lottie animation performance with Web Workers?▼

Use DotLottieWorker from @lottiefiles/dotlottie-web (or DotLottieWorkerReact) to render animations off the main thread. Assign a workerId to group animations into separate workers when running multiple complex animations simultaneously.

How do I change Lottie animation colors at runtime?▼

Use dynamic slots: call getSlotIds to discover slots, then setColorSlot with RGBA values (0-1 range) to override colors. You can also apply embedded themes via themeId or pass theme JSON with setThemeData per the dotLottie 2.0 spec.

Should I use .lottie or .json files for animations?▼

Prefer the .lottie format over .json. It is compressed for smaller file size, supports multiple animations in one file, embeds assets like images and fonts, and enables state machines and theming with slots.

Related Skills

Explore More Software Engineering Skills→
hanzoaihanzoai

lottie-bodymovin

Translate Disney's 12 animation principles into Lottie vector animations from After Effects exports.

Official
Intermediate
DanialHaseebDanialHaseeb

optimize

Diagnose and fix UI performance issues across loading, rendering, animations, images, and bundle size.

Community
Advanced
chroniicallydiistractedchroniicallydiistracted

optimize

Diagnoses web performance bottlenecks and validates fixes with before/after metrics.

Community
Intermediate
nexu-ionexu-io
93.2k

video-template-frame-liquid-bg-hero

Generate WebGL-style fluid displacement motion videos with text overlays for marketing and editorial content.

Official
Intermediate