What is the lottie-animations skill?
The lottie-animations skill is a SKILL.md folder in freshtechbro's design skills repository. It teaches an AI coding agent to render After Effects animations exported as Lottie JSON or dotLottie files, using lottie-web, the dotLottie libraries or lottie-react, with patterns for playback, events, scroll and cursor interaction, themes and web workers.
A designer builds an animation in After Effects, exports it through the Bodymovin plugin, and the web renders it as vectors. This skill gives your agent the code patterns for that last step, from a plain HTML canvas to React, Vue and Svelte.
Its description lists triggers such as Lottie, lottie-web, lottie-react, dotLottie and bodymovin, and says it complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive animation.
JSON Lottie versus dotLottie
- JSON Lottie (.json): the original format, exported from After Effects with Bodymovin. It is readable but uncompressed, so files run larger.
- dotLottie (.lottie): a ZIP holding the JSON plus assets, able to carry several animations and themes. The skill cites reductions of up to 90 percent and recommends it for production.
- Libraries covered: lottie-web, @lottiefiles/dotlottie-web, @lottiefiles/dotlottie-react and lottie-react.
Patterns inside the skill
- A basic HTML page that plays a dotLottie file on a canvas.
- A React component with play, pause, stop and seek buttons.
- Event listeners for load, play, pause, complete and frame, removed on cleanup.
- Scroll-driven and cursor-driven playback with lottie-react.
- Multiple animations and themes from one .lottie file, plus a worker-based renderer.
When it helps and when it does not
Reach for it when
- A designer hands over an After Effects animation for an icon, loader or onboarding screen.
- You want a small vector alternative to a GIF or a video.
- You need playback you can control from code, such as hover, scroll or a click.
Skip it when
- There is no animation file yet. The skill renders exports from After Effects and does not design the motion for you.
- You need free-form scroll choreography on ordinary elements. gsap-scrolltrigger fits that better.
Keeping animation files light
- Export settings in After Effects: skip unused images, prefer glyphs to fonts and use shape layers.
- Choose dotLottie for compression and lazy load animations with an IntersectionObserver.
- Pick the canvas renderer for complex animations and offload heavy ones to a web worker.
- Review wider page speed with web-performance-skill.
Use it with UiChemy
Lottie playback depends on a player script and an animation file, not on a design layout. Build the page with your agent, then import it through UiChemy AI to WordPress. Click Get Started on uichemy.com, then confirm the animation still loads.
How to install Lottie Animations Skill: dotLottie and lottie-react for the Web
/plugin marketplace add freshtechbro/claudedesignskillsRegister the marketplace
Inside Claude Code, run
/plugin marketplace add freshtechbro/claudedesignskills. The README calls this the recommended route.Install the bundle that contains Lottie
Run
/plugin install animation-components. The README lists that bundle as React Spring, Magic UI, AOS, Anime.js and Lottie, and groups lottie-animations under Animation and Components.Or unzip only this skill
Clone
https://github.com/freshtechbro/claudedesignskills.git, then unzip.claude/skills/lottie-animations.zipintoyour-project/.claude/skills/lottie-animations/. This matches the README's local-project option, which extracts the zip's contents, not the zip itself.Or upload to claude.ai
Open Settings, then Features, then Skills, choose Upload skill and pick the skill's .zip from
.claude/skills/. The README says the skill then activates when Claude detects a matching task.
Check that it loaded
Ask the agent to add a looping dotLottie animation to a React component with play and pause buttons. The answer should use DotLottieReact and a ref callback rather than a hand-built SVG animation.
Key features
- Format guidanceThe skill explains JSON Lottie as the original Bodymovin export and dotLottie as the compressed ZIP format with multiple animations and themes, recommending dotLottie for production.
- Library selectionIt compares lottie-web, @lottiefiles/dotlottie-web, @lottiefiles/dotlottie-react and lottie-react, with a short working snippet for each so the agent picks the right package.
- Animation data sourcesSources covered are LottieFiles hosting with 100,000+ free animations, local JSON or dotLottie files bundled in the app, and custom After Effects exports.
- Playback controlsA React example keeps a dotLottie reference through dotLottieRefCallback and wires buttons to play, pause, stop and setFrame.
- Lifecycle eventsThe skill registers listeners for load, play, pause, complete and frame inside an effect, then removes each one in the cleanup function.
- Scroll and cursor interactivityWith lottie-react, an interactivity object maps visibility ranges to stop, seek and loop actions, and useLottieInteractivity in cursor mode plays a segment on hover.
- Themes and multiple animationsA single .lottie file can hold several animations and themes. The skill reads them from the manifest and switches them through the animationId and themeId props.
- DotLottieWorkerHeavy animations can render in a web worker. Setting workerId groups several animations onto the same worker.
- GSAP ScrollTrigger syncAn integration example scrubs a Lottie animation with ScrollTrigger by converting scroll progress into a frame number and calling goToAndStop.
- File size and runtime tipsGuidance includes After Effects export settings, lazy loading with IntersectionObserver and picking SVG or canvas rendering. The folder adds three reference files and two Python scripts.
Frequently asked questions
What is the lottie-animations skill?
It is a skill folder in the freshtechbro/claudedesignskills repository. It teaches an AI coding agent to render After Effects animations on the web using Lottie JSON or dotLottie files, with code for playback, events, scroll and cursor interaction, themes and performance.
How do I install the lottie-animations skill?
Add the marketplace with /plugin marketplace add freshtechbro/claudedesignskills, then run /plugin install animation-components, which the README says bundles Lottie. You can also copy .claude/skills/lottie-animations into your project's skills folder, or upload the skill's .zip to claude.ai from the Skills settings.
What is the difference between JSON Lottie and dotLottie?
JSON Lottie is the original format, exported with the Bodymovin plugin and stored as uncompressed JSON. dotLottie is a ZIP archive holding the JSON plus assets, able to carry multiple animations and themes. The skill cites file size reductions of up to 90 percent and recommends dotLottie for production.
Which libraries does the skill cover?
It covers lottie-web, @lottiefiles/dotlottie-web, @lottiefiles/dotlottie-react and lottie-react. It also includes Vue 3 and Svelte examples with the dotLottie packages. The dotLottie options are marked as the modern choice, while lottie-react appears as an alternative React wrapper with an interactivity helper.
Which AI coding agents can use the lottie-animations skill?
The README documents Claude Code through its plugin marketplace and claude.ai through skill upload, and it lists no other agents. A different agent that loads SKILL.md folders may read the copied folder, but the repository does not confirm that, so try it on a small animation first.
Can the skill drive Lottie from scroll position?
Yes. It shows a lottie-react interactivity object in scroll mode, with visibility ranges that stop, seek or loop frames. It also shows a GSAP ScrollTrigger version that maps scroll progress to a frame. For wider scroll work see motion-framer-motion.
Does the skill create Lottie animations?
No. It covers rendering animations that a designer creates in After Effects and exports with Bodymovin, or that you download from LottieFiles. The skill also gives export tips for smaller files, and icon-system helps if you are planning a set of static icons instead.
What license does the repository use?
The repository README states the MIT License, and GitHub reports MIT for the repo. That covers the skill collection. Any animation file you download or any After Effects project you export has its own terms, so check those separately before shipping.