Design & Motion · iart-ai/web-animation-skills

lottie-animation

Name: lottie-animation
Author: iart-ai/web-animation-skills

This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation on web or mobile", "control Lottie playback / segments", "make a scroll-driven Lottie", "recolor a Lottie at runtime", or "export an AE animation to Lottie". Covers dotLottie/lottie-web integration, playback control, interactivity, theming, and the AE export checklist.

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessWrite FileDual-pass Audit

Author iart-aiGitHub iart-ai/web-animation-skills ↗Stars 28License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）Commit b6dba3eb75

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Positioned as the bridge from After Effects to production: encodes vector animations into JSON or a zip container to be played by a runtime, decoupling them from resolution and platform constraints.

skills/lottie-animation/SKILL.md

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.

Format tradeoffs are explicit: .lottie (zip container, typically 60–80% smaller, supports multi-animation and theming) is preferred; lottie-web is used only in legacy .json plus SVG renderer scenarios.

Playback control relies on the core triad API of frame, segment, and mode, using load/complete/frame events for state-machine-style orchestration.

skills/lottie-animation/SKILL.md

dotLottie.setSegment(30, 90); // constrain playback to a frame range (e.g. a "loading" loop)

Provides production-grade state machine patterns, such as playing a checked segment, listening for complete, and calling setSegment back to an idle loop.

Scroll-driven animation without animation libraries: autoplay:false plus mapping scroll progress to frames (clamping 0..1 then multiplying by total-1), or declarative configuration via lottie-interactivity.

skills/lottie-animation/SKILL.md

dotLottie.setFrame(p * (total - 1));

Enables Lottie to achieve scroll-driven interactivity without introducing GSAP, serving as its key differentiator over gsap-web.

Two paths for runtime theming: embedded named themes in .lottie (setTheme/loadTheme, no re-export needed) versus fragile monkey-patching via manually traversing layers[].shapes[] to alter color values.

skills/lottie-animation/SKILL.md

load the JSON, walk `layers[].shapes[]` and patch `c.k` color arrays (normalized 0–1 RGBA), then init the player with the modified object. Brittle

Clearly labels which path is recommended (themes) and which is a last resort, preventing brittle monkey-patching from being treated as standard practice.

Provides an export-side checklist: details the Bodymovin export workflow, AE expressions, and known gaps where most effects are unsupported, explaining why previews look correct while production renders break.

skills/lottie-animation/references/integration-and-export.md

**Expressions** — not evaluated by runtimes. Bake expression-driven motion to keyframes (Bodymovin can pre-render some) or remove. Heavy-expression rigs are the #1 source of "looks wrong in product".

Listing non-portable features item by item along with workarounds is the most easily overlooked yet most valuable part of this pipeline.

2Core Capabilities

01Dual-path Web integration (native @lottiefiles/dotlottie-web and dotlottie-react wrapper)

02Playback control and events (play/pause/stop/setSpeed/setMode/setFrame/setSegment and load/complete/frame)

03Scroll and interaction-driven control (handcrafted progress mapping or lottie-interactivity scroll/hover/click/cursor modes)

04Runtime theming and recoloring (embedded themes preferred, manual patch as last resort)

05Mobile platform alignment (equivalent progress and segment concepts in lottie-ios / lottie-android / lottie-react-native)

06Optimization checklist (.lottie preferred, IntersectionObserver lazy play/pause, renderer selection, AE composition slimming, runtime recoloring over multiple exports)

07Frame-level freeze harness (?t=N via setFrame, reading totalFrames as end-frame baseline)

08AE unsupported features checklist and workarounds (pre-export sanity check)

09Zero-build delivery (single HTML importing runtime, explicitly requiring no bundler)

10Accessibility criteria: disable auto-playing loops under prefers-reduced-motion, providing static frames or playback controls

3External Dependencies

Kind	Dependency / Endpoint
package	@lottiefiles/dotlottie-web（首选现代运行时：canvas 加 WASM）
package	@lottiefiles/lottie-interactivity（声明式交互模式）
package	lottie-web（遗留 .json 加 SVG 渲染器路径）
network	交付页从 CDN 取 dotLottie 运行时（产物期引用，不判级；正文未点名具体域）
package	移动端运行时：lottie-ios / lottie-android / lottie-react-native
cli	npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Declare allowed domains and key scope

For Administrators

Least privilege keys, retain request logs

Evidence & Triggers (File Paths & Excerpts)

网络端点: External network access declaration: Zero egress calls at execution time; text examples contain fetch("/icon.json") (relative path to local asset, not external egress)
本地工作目录: File I/O and artifact output: Zero disk writes in skill directory; delivery artifact is a single self-contained .html (runtime plus canvas plus relative .lottie/.json file or data URL)

Audit Notes: . Evaluation is based strictly on the skill directory itself (skills/lottie-animation/ = SKILL.md + 0-byte README.md + references/integration-and-export.md, verified exhaustively via find): zero scripts, zero credentials, zero disk writes, zero runtime outbound network calls (in token scans across fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval(, the only match is fetch("/icon.json") inside references—a relative path fetching a local asset, not outbound traffic). References in text to npm packages (installed in user projects) and CDN runtimes (referenced in production artifacts without fixing specific domains) do not affect grading.

5Second-Pass Verification

[unlocatable] .lottie 比 .json 小 60–80% 这一数字 — SKILL.md 写 .lottie often 60–80% smaller，但源码内无基准、无样例文件（本 skill 目录不含任何 .lottie/.json 资产），属外部经验值，记为文档声明，不作已验证事实。
[ok] 唯一的 fetch( 命中是否构成外发 — references/integration-and-export.md 的 const json = await fetch("/icon.json").then((r) => r.json()); 使用相对路径，取同源本地资产（用于手动改色），不构成网络外发；该写法位于 Manual color patching (last resort) 小节，正文亦标注为脆弱手段。
[ok] 运行时 API 名称是否自洽（setFrame/setSegment/setMode/totalFrames） — SKILL.md 的 Playback control 段、Quick reference 表、冻结 harness 段与 references 第 1、3 节对同一组方法名（setFrame/setSegment/setSpeed/setMode/setTheme/totalFrames/play/pause/stop）表述一致，并明确区分 lottie-web 的 goToAndStop(N, true) 等价写法。
[discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，scripts/ 在仓库根；且本 skill 的冻结单位是帧（?t=42），而 seek-shot.sh 把 ?t= 当秒数传参——即使路径正确，语义也需按帧自行换算。

6Verdict & Scenarios

The only skill covering the entire pipeline from design to engineering: integration, playback control, theming, mobile alignment, and an AE export checklist

Scroll-driven interactivity without GSAP dependencies, offering both setFrame progress mapping and lottie-interactivity as low-cost paths

Catalogs unsupported AE features into a checklist, directly addressing the real-world bug where previews look right but production breaks

Clearly tiers theming approaches (embedded themes prioritized, manual patching explicitly flagged as brittle)

Best for: Best for: 1) Delivery workflows taking designer AE animations into production across Web / iOS / Android / React Native; 2) Looping illustrations, onboarding flows, empty states, icon micro-interactions, and state-machine transitions (e.g., loading to success); 3) Vector playback driven by scroll, hover, click, or cursor; 4) Runtime recoloring/theming to reuse the same asset; 5) Pre-export AE sanity checklists to prevent production rendering glitches.

Not for: Not suitable for: 1) Complex timelines or scroll-driven storytelling requiring code-native orchestration (use gsap-web); 2) Lightweight icon micro-animations achievable purely with CSS/SVG (use svg-animation); 3) Offline environments unable to load runtime files; 4) Assets heavily dependent on AE expressions or unsupported effects without pre-baking—these will inevitably distort in production, and this skill can only prompt a redesign rather than auto-fix them.

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload lottie-animation.tar.gz

sha256: d36e9095939adbd5…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit b6dba3eb75.