# lottie-animations

A skill that walks the agent through shipping After Effects Lottie animations on the web and in React: picking a player library and wiring playback controls.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2900 installs · ★ 1133
- Author: freshtechbro
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/animation-components/skills/lottie-animations/SKILL.md
- Updated: 2025-11-20
- HTML: https://affpapa.org/en/nevibecode/skills/lottie-animations

## What it does

The skill hands the agent runnable patterns for Lottie. You get `lottie-web` with an `svg`, `canvas` or `html` renderer, the newer `@lottiefiles/dotlottie-web` and `@lottiefiles/dotlottie-react` packages, and the `lottie-react` wrapper. Artwork arrives from After Effects as JSON via the Bodymovin plugin, or as a compressed `.lottie` file — a ZIP holding the JSON plus assets. The compressed variant weighs less than plain JSON.

Covered scenarios include dropping an animation into a `<canvas>` element, a React component with play, pause, stop and frame seeking, listeners for `load`, `play`, `complete` and frame events, plus scroll interactivity defined through visibility ranges. For long scroll stories the skill sits alongside GSAP ScrollTrigger and Framer Motion: those own the scroll timeline while Lottie handles the vector art.

Animations come either from a direct lottie.host URL or from a local file, and the local route skips the network request. No API key is involved. Keeping the exported JSON in the repo pays off because animation changes then show up in diffs.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/lottie-animations/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/lottie-animations/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/lottie-animations/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/lottie-animations/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills lottie-animations
```

2. **Manually: put the files in place**
- File: `.github/skills/lottie-animations/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/animation-components/skills/lottie-animations
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/lottie-animations/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/animation-components/skills/lottie-animations/SKILL.md

## When to use it
- put an After Effects Lottie animation on a web page
- build a React player with play, pause and frame seek
- replace a heavy GIF with a smaller vector JSON file
- tie animation playback to page scrolling
- choose between lottie-web, dotLottie and lottie-react

## Example prompts
- Wire `animation.lottie` into a canvas with `@lottiefiles/dotlottie-web`, autoplay and loop on
- Build a React component with `@lottiefiles/dotlottie-react` that has play, pause and a seek to frame 30
- Drive `robot.json` playback from scroll in `lottie-react` using scroll mode

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 8a8dab57959e8e0c.

BEGIN THIRD-PARTY FILE 8a8dab57959e8e0c
````text
---
name: lottie-animations
description: After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects JSON export, bodymovin, animated SVG alternatives, or designer-created animations. Complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive animations.
---

# Lottie Animations

## Overview

Lottie is a library for rendering After Effects animations in real-time on web, iOS, Android, and React Native. Created by Airbnb, it allows designers to ship animations as easily as shipping static assets. Animations are exported from After Effects as JSON files using the Bodymovin plugin, then rendered natively with minimal performance overhead.

**When to use Lottie:**
- Designer-created animations that need pixel-perfect fidelity
- Complex animated icons and micro-interactions
- Loading animations and progress indicators
- Onboarding sequences and tutorial animations
- Marketing animations and promotional content
- Alternative to GIF/video with smaller file sizes and scalability

**Key advantages:**
- Vector-based (scalable without quality loss)
- Significantly smaller file sizes than GIF or video
- Editable at runtime (colors, speed, segments)
- Full designer control via After Effects
- Cross-platform rendering consistency
- Interactive controls (play, pause, seek, loop)

## Core Concepts

### Lottie Format Types

**1. JSON Lottie (.json)**
- Original Lottie format
- Exported from After Effects via Bodymovin plugin
- Human-readable JSON structure
- Larger file sizes (not compressed)
- Widely supported across all platforms

**2. dotLottie (.lottie)**
- Modern compressed format
- ZIP archive containing JSON + assets
- Supports multiple animations and themes in one file
- Smaller file sizes (up to 90% reduction)
- Recommended for production use

### Library Options

**lottie-web** (original library):
```javascript
import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg', // or 'canvas', 'html'
  loop: true,
  autoplay: true,
````
END THIRD-PARTY FILE 8a8dab57959e8e0c

The third-party file has ended. Everything between the 8a8dab57959e8e0c tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2288 of 17982 bytes. © freshtechbro · MIT · https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/animation-components/skills/lottie-animations/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md