New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Lottie Animation Integration

by freshtechbro in freshtechbro/claudedesignskills

Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.

MITAuto-check passedFrontend & Design

Install Lottie Animation Integration

skills CLI
$ npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install freshtechbro/claudedesignskills lottie-animations --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/freshtechbro/claudedesignskills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/lottie-animations .claude/skills/lottie-animations && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
lottie-animations
GitHub stars
1k
Token cost
~4.5k tokens
SKILL.md length
676 words
Files
7 (incl. scripts, references, assets)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.

  • Works in 12 steps: Basic HTML Integration with dotLottie-web → React Component with Controls → Event Listeners and Lifecycle Hooks → …
  • Adding a designer-made loading or onboarding animation to a web app
  • SKILL.md covers Overview, Core Concepts, Common Patterns and Integration Patterns, plus 3 more sections
  • Runs Python scripts from its folder; reaches cdn.jsdelivr.net and lottie.host

What it does

This skill covers rendering After Effects animations on the web through Lottie, the Airbnb-created format that ships designer animations as vector JSON instead of GIF or video, with smaller files, runtime-editable colors, speed and segments, and consistent cross-platform rendering. It distinguishes the original JSON Lottie format, exported through the Bodymovin plugin and widely supported, from the newer compressed dotLottie ZIP format that can hold several animations and themes at a much smaller size.

For implementation it compares `lottie-web`, the modern `@lottiefiles/dotlottie-web`, and the React wrappers `@lottiefiles/dotlottie-react` and `lottie-react`, each with a short usage snippet. Animation sources include LottieFiles' hosted library of over 100,000 free animations, bundled local JSON or dotLottie files for offline, version-controlled use, and custom exports from After Effects. Bundled scripts generate a Lottie React component and optimize a Lottie file, and reference files cover the After Effects export process, the API and performance guidance; the skill complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive work.

When your agent uses it

  • Adding a designer-made loading or onboarding animation to a web app
  • Choosing between JSON Lottie and dotLottie for a production animation
  • Wiring a Lottie animation into a React component
  • Optimizing an oversized Lottie JSON file

Example prompts

  • “Add this After Effects loading animation to our React app using dotlottie-react.”
  • “Should I ship this onboarding animation as JSON Lottie or convert it to dotLottie?”
  • “Optimize this Lottie JSON file, it is too large for our bundle.”

Requirements

  • A Lottie or dotLottie JSON file exported from After Effects
  • A Lottie rendering library such as lottie-web or dotlottie-react

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. Basic HTML Integration with dotLottie-web
  2. React Component with Controls
  3. Event Listeners and Lifecycle Hooks
  4. Scroll-Driven Animation with lottie-react
  5. Hover-Triggered Segment Playback
  6. Multi-Animation and Theme Support
  7. Web Worker for Performance (DotLottieWorker)
  8. Memory Leaks from Improper Cleanup
  9. Event Listener Cleanup
  10. Large File Sizes
  11. Animation Performance Issues
  12. Incorrect Path/URL References

What it can do on your machine

Read from SKILL.md and the folder at commit 1da73fe. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (Python), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net
    • lottie.host
    • path-to-animation.lottie

    Also links to:

    • lottiefiles.com
    • airbnb.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Lottie Animation Integration loads about 4.5k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 124 tokens; SKILL.md has 676 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~124
When it runs · the whole SKILL.md, loaded when a task matches
~4.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~14k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from freshtechbro/claudedesignskills at commit 1da73fe, republished under its MIT licence (© freshtechbro). 676 words, ~4,496 tokens.

Download SKILL.mdSave it as .claude/skills/lottie-animations/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
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,
  path: 'animation.json' // or animationData: jsonData
});

@lottiefiles/dotlottie-web (modern, recommended):

javascript
import { DotLottie } from '@lottiefiles/dotlottie-web';

new DotLottie({
  canvas: document.getElementById('canvas'),
  src: 'animation.lottie',
  autoplay: true,
  loop: true
});

@lottiefiles/dotlottie-react (React integration):

jsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

<DotLottieReact
  src="animation.lottie"
  loop
  autoplay
  style={{ height: 300 }}
/>

lottie-react (alternative React wrapper):

jsx
import Lottie from 'lottie-react';
import animationData from './animation.json';

<Lottie animationData={animationData} loop={true} />
Animation Data Sources

1. LottieFiles (lottie.host)

  • 100,000+ free animations
  • Direct URL embedding
  • CDN hosting

2. Local JSON/dotLottie files

  • Bundled with application
  • Better performance (no network request)
  • Version control friendly

3. After Effects export

  • Custom designer animations
  • Bodymovin plugin required
  • Export settings critical for file size

Common Patterns

1. Basic HTML Integration with dotLottie-web
html
<!DOCTYPE html>
<html>
<head>
  <style>
    #canvas {
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script type="module">
    import { DotLottie } from 'https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm';

    new DotLottie({
      canvas: document.getElementById('canvas'),
      src: 'https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie',
      autoplay: true,
      loop: true
    });
  </script>
</body>
</html>
2. React Component with Controls
jsx
import React from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

const AnimatedButton = () => {
  const [dotLottie, setDotLottie] = React.useState(null);

  const handlePlay = () => dotLottie?.play();
  const handlePause = () => dotLottie?.pause();
  const handleStop = () => dotLottie?.stop();
  const handleSeek = (frame) => dotLottie?.setFrame(frame);

  return (
    <div>
      <DotLottieReact
        src="button-animation.lottie"
        loop
        autoplay={false}
        dotLottieRefCallback={setDotLottie}
        style={{ height: 200 }}
      />

      <div>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
        <button onClick={handleStop}>Stop</button>
        <button onClick={() => handleSeek(30)}>Seek to frame 30</button>
      </div>
    </div>
  );
};
3. Event Listeners and Lifecycle Hooks
jsx
import React, { useEffect } from 'react';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

const EventDrivenAnimation = () => {
  const [dotLottie, setDotLottie] = React.useState(null);

  useEffect(() => {
    if (!dotLottie) return;

    const onLoad = () => console.log('Animation loaded');
    const onPlay = () => console.log('Animation started');
    const onPause = () => console.log('Animation paused');
    const onComplete = () => console.log('Animation completed');
    const onFrame = ({ currentFrame }) => console.log('Frame:', currentFrame);

    dotLottie.addEventListener('load', onLoad);
    dotLottie.addEventListener('play', onPlay);
    dotLottie.addEventListener('pause', onPause);
    dotLottie.addEventListener('complete', onComplete);
    dotLottie.addEventListener('frame', onFrame);

    return () => {
      dotLottie.removeEventListener('load', onLoad);
      dotLottie.removeEventListener('play', onPlay);
      dotLottie.removeEventListener('pause', onPause);
      dotLottie.removeEventListener('complete', onComplete);
      dotLottie.removeEventListener('frame', onFrame);
    };
  }, [dotLottie]);

  return (
    <DotLottieReact
      src="animation.lottie"
      loop
      autoplay
      dotLottieRefCallback={setDotLottie}
    />
  );
};
4. Scroll-Driven Animation with lottie-react
jsx
import Lottie from 'lottie-react';
import robotAnimation from './robot.json';

const ScrollAnimation = () => {
  const interactivity = {
    mode: 'scroll',
    actions: [
      {
        visibility: [0, 0.2],
        type: 'stop',
        frames: [0]
      },
      {
        visibility: [0.2, 0.45],
        type: 'seek',
        frames: [0, 45]
      },
      {
        visibility: [0.45, 1.0],
        type: 'loop',
        frames: [45, 60]
      }
    ]
  };

  return (
    <Lottie
      animationData={robotAnimation}
      style={{ height: 300 }}
      interactivity={interactivity}
    />
  );
};
5. Hover-Triggered Segment Playback
jsx
import { useLottie, useLottieInteractivity } from 'lottie-react';
import likeButton from './like-button.json';

const HoverAnimation = () => {
  const lottieObj = useLottie({
    animationData: likeButton
  });

  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'cursor',
    actions: [
      {
        position: { x: [0, 1], y: [0, 1] },
        type: 'loop',
        frames: [45, 60]
      },
      {
        position: { x: -1, y: -1 },
        type: 'stop',
        frames: [45]
      }
    ]
  });

  return <div style={{ height: 300, border: '2px solid black' }}>{Animation}</div>;
};
6. Multi-Animation and Theme Support
jsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import React, { useState, useEffect } from 'react';

const ThemedAnimation = () => {
  const [dotLottie, setDotLottie] = useState(null);
  const [animations, setAnimations] = useState([]);
  const [themes, setThemes] = useState([]);
  const [currentAnimationId, setCurrentAnimationId] = useState('');
  const [currentThemeId, setCurrentThemeId] = useState('');

  useEffect(() => {
    if (!dotLottie) return;

    const onLoad = () => {
      setAnimations(dotLottie.manifest.animations || []);
      setThemes(dotLottie.manifest.themes || []);
      setCurrentAnimationId(dotLottie.activeAnimationId);
      setCurrentThemeId(dotLottie.activeThemeId);
    };

    dotLottie.addEventListener('load', onLoad);
    return () => dotLottie.removeEventListener('load', onLoad);
  }, [dotLottie]);

  return (
    <div>
      <DotLottieReact
        src="multi-animation.lottie"
        dotLottieRefCallback={setDotLottie}
        animationId={currentAnimationId}
        themeId={currentThemeId}
      />

      {themes.length > 0 && (
        <select value={currentThemeId} onChange={(e) => setCurrentThemeId(e.target.value)}>
          {themes.map((theme) => (
            <option key={theme.id} value={theme.id}>{theme.id}</option>
          ))}
        </select>
      )}

      {animations.length > 0 && (
        <select value={currentAnimationId} onChange={(e) => setCurrentAnimationId(e.target.value)}>
          {animations.map((anim) => (
            <option key={anim.id} value={anim.id}>{anim.id}</option>
          ))}
        </select>
      )}
    </div>
  );
};
7. Web Worker for Performance (DotLottieWorker)
javascript
import { DotLottieWorker } from '@lottiefiles/dotlottie-web';

// Offload animation rendering to a web worker
new DotLottieWorker({
  canvas: document.getElementById('canvas'),
  src: 'heavy-animation.lottie',
  autoplay: true,
  loop: true,
  workerId: 'worker-1' // Group multiple animations by worker
});

// Multiple animations in separate workers
new DotLottieWorker({
  canvas: document.getElementById('canvas-2'),
  src: 'animation-2.lottie',
  autoplay: true,
  loop: true,
  workerId: 'worker-2'
});

Integration Patterns

With GSAP ScrollTrigger
jsx
import Lottie from 'lottie-react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import animationData from './animation.json';

gsap.registerPlugin(ScrollTrigger);

const GSAPLottieIntegration = () => {
  const lottieRef = React.useRef();

  React.useEffect(() => {
    const anim = lottieRef.current;
    if (!anim) return;

    // Sync Lottie with scroll
    gsap.to(anim, {
      scrollTrigger: {
        trigger: '#animation-section',
        start: 'top center',
        end: 'bottom center',
        scrub: 1,
        onUpdate: (self) => {
          const frame = Math.floor(self.progress * (anim.totalFrames - 1));
          anim.goToAndStop(frame, true);
        }
      }
    });
  }, []);

  return (
    <div id="animation-section" style={{ height: '200vh' }}>
      <Lottie
        lottieRef={lottieRef}
        animationData={animationData}
        autoplay={false}
        loop={false}
      />
    </div>
  );
};
With Framer Motion
jsx
import { motion } from 'framer-motion';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

const MotionLottie = () => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.6 }}
    >
      <DotLottieReact
        src="animation.lottie"
        loop
        autoplay
        style={{ height: 400 }}
      />
    </motion.div>
  );
};
Vue 3 Integration
vue
<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
</script>

<template>
  <DotLottieVue
    style="height: 500px; width: 500px"
    autoplay
    loop
    src="https://path-to-animation.lottie"
  />
</template>
Svelte Integration
svelte
<script lang="ts">
  import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
  import type { DotLottie } from '@lottiefiles/dotlottie-svelte';

  let dotLottie: DotLottie | null = null;

  function play() {
    dotLottie?.play();
  }
</script>

<DotLottieSvelte
  src="animation.lottie"
  loop={true}
  autoplay={true}
  dotLottieRefCallback={(ref) => dotLottie = ref}
/>

<button on:click={play}>Play</button>

Performance Optimization

File Size Optimization

1. Export Settings in After Effects:

  • Enable "Skip images that aren't used"
  • Use "Glyphs" instead of fonts when possible
  • Simplify paths (reduce points in illustrator)
  • Avoid effects that create large data (particles, noise)
  • Use shape layers instead of vector layers

2. Compression:

  • Use dotLottie format (.lottie) for automatic compression
  • Run JSON through Lottie optimizer tools
  • Remove unnecessary metadata

3. Lazy Loading:

jsx
const LazyLottie = () => {
  const [shouldLoad, setShouldLoad] = React.useState(false);

  React.useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setShouldLoad(true);
      }
    });

    observer.observe(document.getElementById('lottie-trigger'));
    return () => observer.disconnect();
  }, []);

  return (
    <div id="lottie-trigger">
      {shouldLoad && <DotLottieReact src="animation.lottie" loop autoplay />}
    </div>
  );
};
Runtime Performance

1. Renderer Selection:

javascript
// SVG: Best quality, slower for complex animations
// Canvas: Better performance, rasterized
// HTML: Limited support, use only for simple animations

// For complex animations, prefer canvas
new DotLottie({
  canvas: document.getElementById('canvas'),
  src: 'animation.lottie',
  autoplay: true,
  loop: true,
  renderConfig: {
    devicePixelRatio: window.devicePixelRatio || 1
  }
});

2. Web Workers:

javascript
// Offload to worker for heavy animations
import { DotLottieWorker } from '@lottiefiles/dotlottie-web';

new DotLottieWorker({
  canvas: document.getElementById('canvas'),
  src: 'heavy-animation.lottie',
  autoplay: true,
  loop: true
});

3. Mobile Optimization:

javascript
// Reduce quality on mobile
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

new DotLottie({
  canvas: document.getElementById('canvas'),
  src: isMobile ? 'animation-low.lottie' : 'animation-high.lottie',
  autoplay: true,
  loop: true,
  renderConfig: {
    devicePixelRatio: isMobile ? 1 : window.devicePixelRatio
  }
});

Common Pitfalls

1. Memory Leaks from Improper Cleanup

Problem: Not destroying Lottie instances when components unmount.

Solution:

jsx
const SafeAnimation = () => {
  const [dotLottie, setDotLottie] = React.useState(null);

  React.useEffect(() => {
    return () => {
      // Always destroy instance on unmount
      dotLottie?.destroy();
    };
  }, [dotLottie]);

  return <DotLottieReact src="animation.lottie" dotLottieRefCallback={setDotLottie} />;
};
2. Event Listener Cleanup

Problem: Event listeners not removed, causing multiple handlers.

Solution:

jsx
useEffect(() => {
  if (!dotLottie) return;

  const handleComplete = () => console.log('Complete');
  dotLottie.addEventListener('complete', handleComplete);

  // MUST return cleanup function
  return () => {
    dotLottie.removeEventListener('complete', handleComplete);
  };
}, [dotLottie]);
Show full SKILL.md (264 more words)Show less
3. Large File Sizes

Problem: Exported JSON files are 500KB+ for simple animations.

Solutions:

  • Simplify After Effects composition (reduce layers, keyframes)
  • Use dotLottie format for compression
  • Check Bodymovin export settings (disable "Include expressions" if not needed)
  • Remove unused assets before export
  • Use Lottie optimizer tools: https://lottiefiles.com/tools/lottie-editor
4. Animation Performance Issues

Problem: Animation stutters or drops frames.

Solutions:

  • Switch from SVG to Canvas renderer
  • Use DotLottieWorker for web worker rendering
  • Reduce complexity in After Effects (fewer layers, simpler shapes)
  • Lower devicePixelRatio on mobile
  • Avoid animating too many properties simultaneously
5. Incorrect Path/URL References

Problem: Animation doesn't load due to CORS or incorrect paths.

Solution:

jsx
// Use animationData for local imports (best for bundled apps)
import animationData from './animation.json';
<Lottie animationData={animationData} />

// OR use path for external URLs (requires CORS headers)
<DotLottieReact src="https://example.com/animation.lottie" />

// For Next.js, place in public/ folder
<DotLottieReact src="/animations/animation.lottie" />
6. After Effects Export Compatibility

Problem: Some After Effects features don't export to Lottie.

Unsupported features:

  • Layer effects (drop shadows, glows) - use shape layers instead
  • Blending modes (limited support)
  • 3D layers
  • Expressions (partial support)
  • Track mattes (partial support)

Solution:

Resources

This skill includes:

scripts/
  • generate_lottie_component.py - Generate React/Vue/Svelte Lottie component boilerplate
  • optimize_lottie.py - Optimize Lottie JSON file size
references/
  • api_reference.md - Complete API documentation for lottie-web, lottie-react, and dotlottie-web
  • after_effects_export.md - Guide for exporting animations from After Effects
  • performance_guide.md - Detailed performance optimization strategies
assets/
  • starter_lottie/ - Complete React + Vite starter template with Lottie examples
  • examples/ - Real-world Lottie animation patterns and use cases
  • gsap-scrolltrigger - For scroll-driven Lottie animations synchronized with page scroll
  • motion-framer - Combine with Framer Motion for layout animations wrapping Lottie
  • animated-component-libraries - Pre-built components that may include Lottie animations
  • threejs-webgl - For 3D animations beyond Lottie's 2D capabilities
  • react-three-fiber - Alternative for complex 3D animated scenes

© freshtechbro, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (scripts, references, assets) in .claude/skills/lottie-animations of freshtechbro/claudedesignskills.

  • SKILL.md
  • assets/starter_lottie/README.md
  • references/after_effects_export.md
  • references/api_reference.md
  • references/performance_guide.md
  • scripts/generate_lottie_component.py
  • scripts/optimize_lottie.py

Open the folder on GitHubat commit 1da73fe

Compare with similar skills

Lottie Animation Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Lottie Animation Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Lottie Animation Integration this skillfreshtechbro/claudedesignskills1k—~4.5kAutomated safety check: PassMIT
Motiscope RecreateKumarSashank/motiscope122—~2kAutomated safety check: PassMIT
RecreateKumarSashank/motiscope122—~1.8kAutomated safety check: NotesMIT
Motion DesignLottieFiles/motion-design-skill2k1 repos~3.1kAutomated safety check: PassMIT
Phantom Motionpixelxzen/phantom-motion185—~1kAutomated safety check: PassApache-2.0
Awwwards-Level React AnimationsHainrixz/editor-pro-max264—~4.4kAutomated safety check: PassCustom licence

Similar skills

  • Motiscope Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~2k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~1.8k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • Motion Design

    LottieFiles/motion-design-skill

    Applies motion design principles to create emotionally-driven, technically sound animations and transitions.

    2k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • Phantom Motion

    pixelxzen/phantom-motion

    交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。

    185 GitHub stars~1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • Awwwards-Level React Animations

    Hainrixz/editor-pro-max

    Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

    264 GitHub stars~4.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Animate Text

    pixel-point/animate-text

    Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.

    149 GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

More from freshtechbro/claudedesignskills

All 19 skills in this repo

  • Anime.js Animation Guide

    freshtechbro/claudedesignskills

    Guides use of Anime.js for timeline sequences, stagger effects, SVG morphing and keyframe animation on DOM elements, CSS, SVG and JavaScript objects.

    1k GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Barba.js Page Transitions

    freshtechbro/claudedesignskills

    Adds animated page transitions to multi-page sites with Barba.js, covering the wrapper and container markup, lifecycle hooks, views and GSAP integration.

    1k GitHub stars~4.9k tokensUpdated 10 mo ago
    Auto-check passed

  • Blender Web Export Pipeline

    freshtechbro/claudedesignskills

    Exports and optimizes Blender 3D models and animations for the web as glTF, covering batch Python scripting, texture baking, decimation and LOD generation for Three.js and Babylon.js.

    1k GitHub stars~4.2k tokensUpdated 10 mo ago
    Auto-check passed

  • GSAP and ScrollTrigger

    freshtechbro/claudedesignskills

    Covers GSAP tweens and timelines and the ScrollTrigger plugin for scroll-driven animation, including pinning, scrubbing, parallax and horizontal scroll sections.

    1k GitHub stars~4.3k tokensUpdated 10 mo ago
    Auto-check passed

  • Locomotive Scroll

    freshtechbro/claudedesignskills

    A guide to the Locomotive Scroll library for smooth scrolling, parallax, viewport detection, sticky elements and GSAP ScrollTrigger integration.

    1k GitHub stars~3.1k tokensUpdated 10 mo ago
    Auto-check passed

  • React Spring Physics Animation

    freshtechbro/claudedesignskills

    Guides React UI animation built on spring physics with React Spring and Popmotion: hooks, config presets, trails, list transitions and scroll or in-view effects.

    1k GitHub stars~2.8k tokensUpdated 10 mo ago
    Auto-check passed

Works with

Categories

Questions about Lottie Animation Integration

What does Lottie Animation Integration do?

Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script. This skill covers rendering After Effects animations on the web through Lottie, the Airbnb-created format that ships designer animations as vector JSON instead of GIF or video, with smaller files, runtime-editable colors, speed and segments, and consistent cross-platform rendering. It distinguishes the original JSON Lottie format, exported through the Bodymovin plugin and widely supported, from the newer compressed dotLottie ZIP format that can hold several animations and themes at a much smaller size.

When should I use Lottie Animation Integration?

Lottie Animation Integration fits situations like: adding a designer-made loading or onboarding animation to a web app; choosing between JSON Lottie and dotLottie for a production animation; wiring a Lottie animation into a React component; optimizing an oversized Lottie JSON file.

How do I install Lottie Animation Integration in Claude Code?

Run `npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a claude-code`. Or copy the skill folder (.claude/skills/lottie-animations in freshtechbro/claudedesignskills) into .claude/skills/lottie-animations in your project. Claude Code loads it when a task matches its description.

How do I install Lottie Animation Integration in Codex?

Run `npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a codex`. Or copy the skill folder (.claude/skills/lottie-animations in freshtechbro/claudedesignskills) into .agents/skills/lottie-animations in your project. Codex loads it when a task matches its description.

Can I use Lottie Animation Integration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add freshtechbro/claudedesignskills --skill lottie-animations -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/lottie-animations, .gemini/skills/lottie-animations, .github/skills/lottie-animations and .opencode/skills/lottie-animations in your project.

What does Lottie Animation Integration need to run?

Going by SKILL.md and its folder, Lottie Animation Integration needs Python for the scripts in its folder. Our summary lists: A Lottie or dotLottie JSON file exported from After Effects; A Lottie rendering library such as lottie-web or dotlottie-react.

Does Lottie Animation Integration access the network?

SKILL.md names 5 domains. In commands or code: cdn.jsdelivr.net, lottie.host and path-to-animation.lottie; the agent is likely to contact these when it follows the instructions. As links in the text: lottiefiles.com and airbnb.io. This is read from the text; nothing was executed.

Is Lottie Animation Integration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Lottie Animation Integration use?

Lottie Animation Integration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Lottie Animation Integration use?

About 4.5k tokens (SKILL.md is roughly 18k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 9.3k tokens, read only when the agent opens those files.

What are the alternatives to Lottie Animation Integration?

Skills that share tags, products or a category with Lottie Animation Integration: Motiscope Recreate (KumarSashank/motiscope, 122 stars), Recreate (KumarSashank/motiscope, 122 stars), Motion Design (LottieFiles/motion-design-skill, 2k stars) and Phantom Motion (pixelxzen/phantom-motion, 185 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Lottie Animation Integration?

freshtechbro (a GitHub user) maintains it in freshtechbro/claudedesignskills, which has 1,007 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on November 20, 2025.

Source: freshtechbro/claudedesignskills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.