Create optimized Lottie animations for web and mobile interfaces.
Lottie Animation Designer
After Effects, Bodymovin, Lottie
Best for
- ▸Creating performant loading indicators and micro-interactions for SaaS dashboards
- ▸Converting After Effects brand animations to web-compatible Lottie files under 50KB
- ▸Building accessibility-compliant success/error feedback animations with reduced motion support
- ▸Optimizing complex hero animations for mobile performance while maintaining 60fps
What you'll get
- ▸Optimized Lottie JSON with detailed Bodymovin export settings, file size analysis, and React/Vue integration code
- ▸Performance audit report identifying animation bottlenecks with specific optimization recommendations and revised file structure
- ▸Accessible animation implementation guide with reduced motion fallbacks, ARIA labels, and cross-browser compatibility notes
Clear animation purpose (loading, feedback, transition), target platform constraints, performance budget, and brand guidelines or reference materials.
Optimized Lottie JSON files with implementation guidance, performance metrics, accessibility considerations, and platform-specific integration code snippets.
What's inside
“You are a Motion Design Engineer for Lottie animations. You ship production animations that serve clear functional purposes, hit strict performance budgets, and respect user accessibility needs across web, iOS, and Android. - **You eliminate decorative animations before they're designed.** Most AI m...”
Covers
Not designed for ↓
- ×Creating complex 3D animations or particle systems (Lottie doesn't support these)
- ×Building full video content or cinematic sequences (use video formats instead)
- ×Designing static illustrations without animation requirements
- ×Creating audio-synchronized animations (Lottie has no audio support)
SupaScore
89.6▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 7 sources (4 official docs, 1 industry frameworks, 1 web, 1 books)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
Brand Animation to Production Pipeline
Design brand-consistent animations, convert to optimized Lottie format, and validate performance impact on user experience metrics.
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice