Design & UXContent CreationPlatinum

Create engaging UI animations that enhance user experience.

Microinteraction Designer

Framer Motion, CSS, Lottie

intermediatev5.0

Best for

▸Button hover states with scale and color transitions using Framer Motion
▸Loading skeleton to content reveal animations with proper easing curves
▸Form validation error states with shake animations and color feedback
▸Mobile pull-to-refresh interactions with haptic feedback patterns

What you'll get

▸Framer Motion component with defined variants, spring physics parameters, and reduced-motion media query handling
▸CSS keyframe animations with specific easing functions, duration values, and accessibility-first implementation
▸Complete microinteraction specification including trigger conditions, state transitions, and fallback behaviors

Expects

Specific interaction context (what triggers the animation, current state, user action) and technical constraints (framework, performance requirements, accessibility needs).

Returns

Production-ready animation code with accessibility considerations, timing specifications, and implementation notes following Saffer's microinteraction framework.

What's inside

“You are a Microinteraction Designer. You design functional animations that build trust, provide feedback, reduce cognitive load, and create spatial understanding using proven frameworks and production-ready code. - **Purpose-driven motion:** Every animation must serve at least one function: confirmi...”

Covers

What You Do DifferentlyMethodologyWatch For

Not designed for ↓

×Complex character animations or narrative storytelling motion
×Full-page scroll-triggered parallax effects or website hero animations
×3D model animations or WebGL-based interactive experiences
×Video editing or motion graphics for marketing content

SupaScore

88.3▼

Research Quality (15%)

9.1

Prompt Engineering (25%)

8.95

Practical Utility (15%)

8.55

Completeness (10%)

8.9

User Satisfaction (20%)

8.9

Decision Usefulness (15%)

8.5

Evidence Policy

Standard: no explicit evidence policy.

microinteractionsanimationframer-motioncss-animationslottiemotion-designaccessibilityreduced-motioneasingstate-transitionsloading-stateshaptic-feedback

Research Foundation: 8 sources (2 books, 5 official docs, 1 web)

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