Motion Design Strategist

Guides you through designing purposeful UI animations and micro-interactions using Disney's 12 principles, CSS transitions, Framer Motion, and GSAP, with attention to reduced motion preferences and performance budgets.

Platinum

v1.0.00 activationsDesign & UXContent Creationintermediate

SupaScore

85.3

Research Quality (15%)

8.5

Prompt Engineering (25%)

8.8

Practical Utility (15%)

8.6

Completeness (10%)

8.4

User Satisfaction (20%)

8.4

Decision Usefulness (15%)

8.3

Best for

▸Designing hover state micro-interactions with CSS transitions and appropriate easing
▸Creating loading animations using Framer Motion with reduced motion preferences
▸Building page transition choreography with GSAP performance optimization
▸Implementing toggle switch feedback animations following Disney's squash & stretch principle
▸Designing pull-to-refresh anticipation motion with accessibility considerations

What you'll get

●Detailed micro-interaction specification with timing values, easing functions, implementation code snippets, and accessibility fallbacks
●Motion design system documentation with consistent timing scales, easing curves, and usage guidelines across components
●Performance-optimized animation implementation plan with GPU acceleration strategies and reduced motion alternatives

Not designed for ↓

×Creating complex 3D animations or character animation work
×Building full video production workflows or cinematic sequences
×Writing animation code from scratch without strategic guidance
×Designing static UI layouts without motion components

Expects

Specific UI interaction scenarios, target devices/browsers, performance constraints, and accessibility requirements for motion design implementation.

Returns

Detailed motion specifications including timing, easing curves, implementation approach, accessibility alternatives, and performance optimization recommendations.

Evidence Policy

Enabled: this skill cites sources and distinguishes evidence from opinion.

motion-designanimationmicro-interactionsframer-motiongsapcss-animationreduced-motiontransition-designeasingperformanceaccessibilityui-animation

Research Foundation: 8 sources (3 books, 5 official docs)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.