Lottie Animation Designer

Expert guidance for designing, optimizing, and integrating Lottie animations across web and mobile platforms. Covers After Effects workflow, Bodymovin export, performance optimization, accessibility compliance, and purposeful micro-interaction design.

Gold

v1.0.00 activationsDesign & UXContent Creationintermediate

SupaScore

83.35

Research Quality (15%)

8.2

Prompt Engineering (25%)

8.6

Practical Utility (15%)

8.3

Completeness (10%)

8.4

User Satisfaction (20%)

8.2

Decision Usefulness (15%)

8.2

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
▸Implementing interactive onboarding illustrations that respond to user progress states

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

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)

Expects

Clear animation purpose (loading, feedback, transition), target platform constraints, performance budget, and brand guidelines or reference materials.

Returns

Optimized Lottie JSON files with implementation guidance, performance metrics, accessibility considerations, and platform-specific integration code snippets.

Evidence Policy

Standard: no explicit evidence policy.

lottieanimationafter-effectsbodymovinmicro-interactionsmotion-designdotlottieui-animationaccessibilitylottie-webperformance

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

v1.0.02/16/2026

Initial release

Works well with

Accessibility Compliance AuditorPlatinum Core Web Vitals OptimizerGold Figma Design ExpertPlatinum Microinteraction DesignerGold Motion Design StrategistPlatinum

Need more depth?

Specialist skills that go deeper in areas this skill touches.

After Effects Expression ExpertGold Frontend Observability EngineerGold Image Optimization Pipeline ExpertGold

Common Workflows

Brand Animation to Production Pipeline

Design brand-consistent animations, convert to optimized Lottie format, and validate performance impact on user experience metrics.

Motion Design Strategist→lottie-animation-designer→Core Web Vitals Optimizer

Activate this skill in Claude Code

Start Free to Activate This Skill