loaders-spinners
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
modals-dialogs
Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
notifications-toasts
Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately
universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
e-commerce-retail
Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences
education-learning
Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences
enterprise-b2b
Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications
fintech-banking
Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards
fitness-wellness
Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
gaming-entertainment
Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media
healthcare-medical
Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
media-publishing
Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences
saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
social-media
Use when designing animations for social platforms, messaging apps, content sharing, or community features
travel-hospitality
Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
universal-industry
Use when designing animations for any industry or when industry-specific guidelines do not apply
after-effects
Use when implementing Disney's 12 animation principles in Adobe After Effects
css-native
Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
figma-prototyping
Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate
framer-motion
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
gsap-greensock
Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)
lottie-bodymovin
Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects
motion-one
Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)
popmotion
Use when implementing Disney's 12 animation principles with Popmotion's functional animation library
react-spring
Use when implementing Disney's 12 animation principles with React Spring's physics-based animations
rive-animations
Use when implementing Disney's 12 animation principles with Rive interactive animations
universal-tool
Use when implementing Disney's 12 animation principles with any animation tool or framework
continuous-infinite
Use when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue
deliberate-1200-2000ms
Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance
dramatic-2000ms-plus
Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product
instant-0-100ms
Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive
large-500-800ms
Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention
medium-300-500ms
Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication
micro-100-200ms
Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible
orchestrated-sequences
Use when building multi-part animation sequences - staggered reveals, choreographed UI, coordinated motion where multiple elements work together
responsive-adaptive
Use when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context
slow-800-1200ms
Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb
small-200-300ms
Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive
universal-timing
Use when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges
anticipation-mastery
Use when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden.
appeal-mastery
Use when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch.
arc-mastery
Use when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.
exaggeration-mastery
Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.
follow-through-overlapping
Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.
secondary-action-mastery
Use when enriching primary animations, adding supporting details, creating depth in motion, or making scenes feel alive without distracting from main action.
slow-in-out-mastery
Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.
solid-drawing-mastery
Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.
squash-stretch-mastery
Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression.
staging-mastery
Use when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicated at any given moment.
Page 1360 of 1630 · 81487 results