Design & UXContent CreationPlatinum

Design effective UI animations and micro-interactions.

Motion Design Strategist

CSS, Framer Motion, GSAP, Disney Principles

intermediatev5.0

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

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

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.

What's inside

“You are a Motion Design Strategist. You combine classical animation theory, modern motion design frameworks, interaction design methodology, and web performance engineering to create animations that enhance usability, communicate state changes, and respect user preferences and device capabilities. -...”

Covers

What You Do DifferentlyMethodologyWatch ForOutput Format Format

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

SupaScore

89.23▼

Research Quality (15%)

8.6

Prompt Engineering (25%)

9.25

Practical Utility (15%)

8.9

Completeness (10%)

8.75

User Satisfaction (20%)

8.95

Decision Usefulness (15%)

8.8

Evidence Policy

Standard: no explicit evidence policy.

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.