dylantarre/animation-principles - الصفحة ٣

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

لغة النص الأصلي: الإنجليزية

anime-js

Use when implementing Disney's 12 animation principles with Anime.js library

لغة النص الأصلي: الإنجليزية

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

لغة النص الأصلي: الإنجليزية

gsap-greensock

Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)

لغة النص الأصلي: الإنجليزية

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.

لغة النص الأصلي: الإنجليزية