Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
freshtechbro avatar

Lottie Animations

freshtechbro/claudedesignskills

  • 1.7k installs
  • 629 repo stars
  • Updated November 20, 2025
  • freshtechbro/claudedesignskills

lottie-animations is an agent skill that after effects animation rendering for web and react applications. use this skill when implementing lottie animations, json vector animations, interactive animated icons, micro-int

About

lottie-animations is an agent skill from freshtechbro/claudedesignskills that 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. # 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 w Developers invoke lottie-animations during build/integrations work for generative media tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.

  • 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

Lottie Animations by the numbers

  • 1,733 all-time installs (skills.sh)
  • +110 installs in the week ending Jul 29, 2026 (Skillselion tracking)
  • Ranked #174 of 1,337 Generative Media skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
At a glance

lottie-animations capabilities & compatibility

Capabilities
designer created animations that need pixel perf · complex animated icons and micro interactions · loading animations and progress indicators · onboarding sequences and tutorial animations · marketing animations and promotional content
Use cases
orchestration
From the docs

What lottie-animations says it does

- Designer-created animations that need pixel-perfect fidelity
SKILL.md
- Complex animated icons and micro-interactions
SKILL.md
- Loading animations and progress indicators
SKILL.md
npx skills add https://github.com/freshtechbro/claudedesignskills --skill lottie-animations

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.7k
repo stars★ 629
Security audit2 / 3 scanners passed
Last updatedNovember 20, 2025
Repositoryfreshtechbro/claudedesignskills ↗

What it does

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

Who is it for?

Developers working on generative media during build tasks.

Skip if: Tasks outside Generative Media scope described in SKILL.md.

When should I use this skill?

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

What you get

Completed generative media workflow aligned with SKILL.md steps.

  • React Vite project scaffold
  • DotLottie example components

By the numbers

  • Includes 2 example Lottie components: BasicAnimation and InteractiveAnimation

Files

SKILL.mdMarkdownGitHub ↗

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):

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):

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

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

@lottiefiles/dotlottie-react (React integration):

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

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

lottie-react (alternative React wrapper):

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

<!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

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

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

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

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

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)

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

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

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

<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

<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:

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:

// 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:

// 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:

// 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:

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:

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

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

  // MUST return cleanup function
  return () => {
    dotLottie.removeEventListener('complete', handleComplete);
  };
}, [dotLottie]);

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:

// 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:

  • Test export early and often
  • Use LottieFiles preview before exporting
  • Check Bodymovin compatibility: https://airbnb.io/lottie/#/supported-features
  • Convert effects to shapes when possible

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

Related Skills

  • 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

Related skills

remotion-devRemotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.442k4.1khalt-catch-fireRemotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k648halt-catch-fireAi Video GenerationTurn written prompts into short videos using AI video generation models directly from Cursor or Claude.363k648halt-catch-fireAi Avatar VideoGenerate short talking-head videos of custom AI avatars from text prompts.363k648halt-catch-fireAi Image GenerationLet their coding agent generate, iterate on, and insert high-quality images directly into web apps, marketing assets, or product features.363k648agentspace-soVideo EditIntelligently route video editing requests to the best RunComfy model without trial-and-error.357k31

How it compares

Use lottie-animations when you want a Vite React starter with DotLottie wired in rather than manually installing animation libraries from scratch.

FAQ

What does lottie-animations do?

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

When should I use lottie-animations?

During build integrations work for generative media.

Is lottie-animations safe to install?

Review the Security Audits panel on this listing before production use.

Generative Mediaautomation
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.