universal-patterns
Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.
calm-relaxation
Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.
comfort-safety
Use when creating animations that reassure users, reduce anxiety, or communicate protection and security.
elegance-sophistication
Use when creating animations that convey luxury, refinement, or premium brand experiences.
excitement-energy
Use when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.
friendliness-approachability
Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging.
playfulness-fun
Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.
power-confidence
Use when creating animations that convey strength, authority, or bold confidence in brand and product.
professionalism-credibility
Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.
trust-reliability
Use when creating animations that build user confidence, establish credibility, and communicate dependability.
universal-emotion
Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.
urgency-action
Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.
Animation Principles - Universal Reference
Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level
Animation Principles - Troubleshooting
Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
buttons-ctas
Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions
cards-containers
Use when animating cards, panels, tiles, or container elements to create depth and interactivity
carousels-sliders
Use when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation
forms-inputs
Use when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback
icons-badges
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
lists-grids
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
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
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.
exaggeration-mastery
Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.
game-development
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
page-transitions
Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.
presentations
Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.
universal-fallback
Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.
video-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
web-motion-design
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
anticipation-payoff
Use when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.
attention-direction
Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.
character-appeal
Use when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must have personality and presence.
emotional-narrative
Use when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience care.
exaggerated-clarity
Use when motion needs to read clearly and powerfully—broad comedy, action highlights, important story beats, or any moment that must unmistakably communicate to the audience.
naturalistic-motion
Use when animation should feel organic and lifelike—creature animation, realistic characters, nature elements, or any motion that needs to breathe with authentic living quality.
physics-intuition
Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.
problem-diagnosis
Use when animation "feels wrong" but you can't pinpoint why—debugging floaty movement, stiff characters, unclear action, or any motion that isn't working and needs systematic troubleshooting.
rhythm-pacing
Use when animation needs musical flow—dance sequences, action choreography, comedic timing, scene pacing, or any motion that should feel rhythmic and well-composed over time.
spatial-thinking
Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
timing-mastery
Use when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement matters.
universal-mindset
Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking styles quite fit the situation.
Page 746 of 1713 · 85612 results
