Lottie Animations
This handles Lottie animations from After Effects exports, covering both the original lottie-web library and the newer dotLottie format that compresses files by up to 90%. You get patterns for basic playback, interactive controls, scroll-driven animations, and hover triggers. It shows React integration with both lottie-react and @lottiefiles/dotlottie-react, plus event listeners for animation lifecycle hooks. The skill is most useful when you're working with designer-created animations that need to stay crisp at any size, or when you want programmatic control over animation segments. It pairs well with scroll libraries if you're doing viewport-triggered effects.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 6
- skills.sh installs
- 3.1K
- GitHub stars
- 1.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add freshtechbro/claudedesignskills --skill lottie-animations --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/freshtechbro/claudedesignskills
- Categories
- Frontend Development, AI & Agent Building, Design & UI/UX, Video & Audio Editing
- First seen
- May 16, 2026
More from freshtechbro/claudedesignskills
All 23- Modern Web Design3.1K
- Animated Component Libraries3.1K
- Gsap Scrolltrigger3.1K
- Spline Interactive3K
- Animejs3K
- Lightweight 3d Effects2.8K
- Rive Interactive2.8K
- Locomotive Scroll2.7K
- Babylonjs Engine2.7K
- Pixijs 2d2.7K
- React Spring Physics2.6K
- Scroll Reveal Libraries2.6K
- Substance 3d Texturing2.6K
- Barba Js2.5K
- Aframe Webxr2.5K
- Playcanvas Engine2.5K
- Skill Creator2.3K
- Motion Framer6.5K
- Threejs Webgl5K
- React Three Fiber4.1K
- Blender Web Pipeline3.9K
- Web3d Integration Patterns3.4K
Recommended
More Frontend Development
remotionnexu-io/open-designProgrammatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.3.1Kskills.sh installs
figma-generate-designopenai/skillsUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',3Kskills.sh installs
spline-interactivefreshtechbro/claudedesignskillsBrowser-based 3D design tool with visual editor, animation, and web export. Use this skill when creating 3D scenes without code, designing interactive web exper3Kskills.sh installs
color-expertmeodai/skill.color-expertUse when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversio2.9Kskills.sh installsfield-notes-editorial-templatenexu-io/open-designEditorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when u2.9Kskills.sh installsfigma-code-connect-componentsopenai/skillsConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map 2.9Kskills.sh installs