Skip to main content ホーム クリエイター lottiefiles dotlottie-web dotlottie-web
dotlottie-web Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns.
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/LottieFiles/dotlottie-web --skill dotlottie-webコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... name dotlottie-web description Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns. license MIT metadata {"author":"lottiefiles","version":"1.0.0","source":"https://github.com/LottieFiles/dotlottie-web"}
dotLottie Implementation Guidelines
You are an expert at implementing Lottie animations using dotLottie runtimes. Follow these guidelines when working with dotLottie in web projects.
Package Selection
Use @lottiefiles/dotlottie-web when:
You need direct canvas control
Building framework-agnostic code
Maximum performance is critical
You want the smallest bundle
Use @lottiefiles/dotlottie-react when:
Building React applications
You want declarative component API
You need React lifecycle integration
Installation
npm install @lottiefiles/dotlottie-web
npm install @lottiefiles/dotlottie-react
Basic Implementation
Vanilla JavaScript import { DotLottie } from '@lottiefiles/dotlottie-web' ;
const dotLottie = new DotLottie ({
canvas : document .getElementById ('canvas' ) as HTMLCanvasElement ,
src : 'https://example.com/animation.lottie' ,
autoplay : true ,
loop : true ,
});
React import { DotLottieReact } from '@lottiefiles/dotlottie-react' ;
function Animation (return (
<DotLottieReact
src ="https://example.com/animation.lottie"
autoplay
loop
/>
React with Instance Control import { useRef } from 'react' ;
import { DotLottieReact } from '@lottiefiles/dotlottie-react' ;
import type { DotLottie } from '@lottiefiles/dotlottie-web' ;
function Animation (const dotLottieRef = useRef<DotLottie | null >(null );
return (
<DotLottieReact
src ="https://example.com/animation.lottie"
dotLottieRefCallback ={(dotLottie) => (dotLottieRef.current = dotLottie)}
/>
.lottie vs .json Always prefer .lottie format over .json:
Smaller file size (compressed)
Supports multiple animations in one file
Embedded assets (images, fonts)
State machines for interactivity
Theming with slots
Web Workers (Recommended for Performance) Use DotLottieWorker to offload animation rendering to a Web Worker, keeping the main thread free for UI interactions:
Basic Worker Usage import { DotLottieWorker } from '@lottiefiles/dotlottie-web' ;
const dotLottie = new DotLottieWorker ({
canvas : document .getElementById ('canvas' ) as HTMLCanvasElement ,
src : 'https://example.com/animation.lottie' ,
autoplay : true ,
loop : true ,
});
Worker Grouping (Multiple Animations) By default, all DotLottieWorker instances share the same worker. Group animations into separate workers using workerId:
const heroAnimation = new DotLottieWorker ({
canvas : heroCanvas,
src : 'hero.lottie' ,
workerId : 'hero-worker' ,
});
const buttonAnimation = new DotLottieWorker ({
canvas : buttonCanvas,
src : 'button.lottie' ,
workerId : 'ui-worker' ,
});
When to Use Workers
React with Workers import { DotLottieWorkerReact } from '@lottiefiles/dotlottie-react' ;
function Animation (return (
<DotLottieWorkerReact
src ="animation.lottie"
autoplay
loop
workerId ="my-worker" // Optional: dedicate to specific worker
/>
State Machines (Interactivity) State machines enable interactive animations without code. See the State Machine Guide for details.
const dotLottie = new DotLottie ({
canvas,
src : 'interactive.lottie' ,
autoplay : true ,
});
dotLottie.stateMachineFireEvent ('click' );
dotLottie.stateMachineFireEvent ('hover' );
dotLottie.stateMachineFireEvent ('custom-event' );
dotLottie.stateMachineSetNumericInput ('progress' , 0.5 );
dotLottie.stateMachineSetBooleanInput ('isActive' , true );
dotLottie.stateMachineSetStringInput ('mode' , 'dark' );
State Machine Events
click - User click/taphover - Mouse enterunhover - Mouse leavecomplete - Animation finishedCustom events defined in the state machine
Theming with Slots const dotLottie = new DotLottie ({
canvas,
src : 'themed.lottie' ,
themeId : 'dark-mode' ,
});
dotLottie.setThemeData (JSON .stringify ({
rules : [
{ id : 'primary-color' , value : [1 , 0.34 , 0.13 ] },
]
}));
Dynamic Slot Overriding Slots enable runtime customization of animated properties using typed APIs.
Available slot types: color, scalar, vector, gradient, text, image.
Key APIs: getSlotIds(), getSlotType(), setColorSlot(), setScalarSlot(),
setVectorSlot(), setGradientSlot(), setTextSlot(), resetSlot(), clearSlots().
For complete API reference with code examples for each slot type, animated keyframes,
resetting, bulk updates, common use cases (branding, dark mode, progress indicators),
and React integration, see Dynamic Slots Reference .
Markers & Segments
Playing Specific Segments
dotLottie.setSegment (0 , 60 );
dotLottie.play ();
dotLottie.setMarker ('intro' );
dotLottie.play ();
Getting Markers const markers = dotLottie.markers ();
Rendering a Specific Frame to an Image Set autoplay: false so playback doesn't advance past your target, then call setFrame() after load. setFrame() renders synchronously, so the canvas and dotLottie.buffer (RGBA Uint8Array) hold that exact frame immediately after the call.
Browser const dotLottie = new DotLottie ({ canvas, src : 'animation.lottie' , autoplay : false });
dotLottie.addEventListener ('load' , () => {
dotLottie.setFrame (42 );
const dataUrl = canvas.toDataURL ('image/png' );
});
Node.js (@napi-rs/canvas) import fs from 'node:fs' ;
import { createCanvas } from '@napi-rs/canvas' ;
const canvas = createCanvas (200 , 200 );
const dotLottie = new DotLottie ({
canvas : canvas as unknown as HTMLCanvasElement ,
src : 'animation.lottie' ,
autoplay : false ,
});
dotLottie.addEventListener ('load' , async () => {
dotLottie.setFrame (42 );
fs.writeFileSync ('frame-42.png' , await canvas.encode ('png' ));
dotLottie.destroy ();
});
For custom encoding, read raw RGBA pixels directly from dotLottie.buffer (length = width × height × 4).
Event Handling dotLottie.addEventListener ('load' , () => {
console .log ('Animation loaded' );
});
dotLottie.addEventListener ('play' , () => {
console .log ('Playing' );
});
dotLottie.addEventListener ('complete' , () => {
console .log ('Animation completed' );
});
dotLottie.addEventListener ('frame' , ({ currentFrame } ) => {
console .log ('Frame:' , currentFrame);
});
dotLottie.removeEventListener ('load' , handler);
Performance Best Practices
1. Use Web Workers for Complex Animations import { DotLottieWorker } from '@lottiefiles/dotlottie-web' ;
const dotLottie = new DotLottieWorker ({
canvas,
src : 'complex-animation.lottie' ,
});
2. Lazy Load Animations
const observer = new IntersectionObserver ((entries ) => {
entries.forEach (entry =>if (entry.isIntersecting ) {
loadAnimation ();
observer.disconnect ();
}
});
});
observer.observe (container);
3. Auto-Freeze is Enabled by Default DotLottie automatically freezes animations when they're not visible (offscreen). To disable this behavior:
const dotLottie = new DotLottie ({
canvas,
src : 'animation.lottie' ,
renderConfig : {
freezeOnOffscreen : false ,
},
});
4. Device Pixel Ratio By default, devicePixelRatio is set to 75% of the actual value for better performance. For full retina quality (with higher performance cost):
const dotLottie = new DotLottie ({
canvas,
src : 'animation.lottie' ,
renderConfig : {
devicePixelRatio : window .devicePixelRatio ,
},
});
5. Clean Up (Vanilla JS only) Note: DotLottieReact handles cleanup automatically on unmount - no manual cleanup needed.
6. Frame Interpolation Control const dotLottie = new DotLottie ({
canvas,
src : 'animation.lottie' ,
useFrameInterpolation : true ,
});
Multi-Animation Files A single .lottie file can contain multiple animations:
dotLottie.loadAnimation ('animation-2' );
const animations = dotLottie.manifest ?.animations ;
Canvas Sizing Set canvas size via CSS styles (recommended). DotLottie will automatically determine the optimal drawing area:
<canvas id ="canvas" style ="width: 400px; height: 400px;" > </canvas >
Auto-Resize to Container Use the autoResize render config to automatically resize when the container changes:
const dotLottie = new DotLottie ({
canvas,
src : 'animation.lottie' ,
renderConfig : {
autoResize : true ,
},
});
Common Patterns
Play on Hover canvas.addEventListener ('mouseenter' , () => dotLottie.play ());
canvas.addEventListener ('mouseleave' , () => dotLottie.pause ());
Play on Click (Once) canvas.addEventListener ('click' , () => {
dotLottie.setFrame (0 );
dotLottie.setLoop (false );
dotLottie.play ();
});
Scrub with Scroll window .addEventListener ('scroll' , () => {
const progress = window .scrollY / (document .body .scrollHeight - window .innerHeight );
const frame = progress * dotLottie.totalFrames ;
dotLottie.setFrame (frame);
});
Loading States (React) function Animation (const [isLoaded, setIsLoaded] = useState (false );
return (
<>
{!isLoaded && <Skeleton /> }
<DotLottieReact
src ="animation.lottie"
style ={{ opacity: isLoaded ? 1 : 0 }}
dotLottieRefCallback ={(dotLottie) => {
dotLottie.addEventListener('load', () => setIsLoaded(true));
}}
/>
</>
Responsive Animation function ResponsiveAnimation (return (
<DotLottieReact
src ="animation.lottie"
autoplay
loop
style ={{ width: '100 %', maxWidth: '400px ' }}
renderConfig ={{ autoResize: true }}
/>
Debugging
console .log ('Loaded:' , dotLottie.isLoaded );
console .log ('Duration:' , dotLottie.duration );
console .log ('Total Frames:' , dotLottie.totalFrames );
console .log ('Current Frame:' , dotLottie.currentFrame );
console .log ('Is Playing:' , dotLottie.isPlaying );
console .log ('Loop:' , dotLottie.loop );
console .log ('Speed:' , dotLottie.speed );
console .log ('Manifest:' , dotLottie.manifest );
Error Handling dotLottie.addEventListener ('loadError' , (error ) => {
console .error ('Failed to load animation:' , error);
});
SSR / Next.js Considerations dotLottie requires browser APIs. For SSR frameworks:
import dynamic from 'next/dynamic' ;
const DotLottieReact = dynamic (
() => import ('@lottiefiles/dotlottie-react' ).then (mod =>DotLottieReact ),
{ ssr : false }
);
function Animation (return <DotLottieReact src ="animation.lottie" autoplay loop />
Resources 