dylantarre-animation-principles

Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.

Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.

Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.

Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.

Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.

Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.

Use when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.

Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.

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.

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.

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.

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.

Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.

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.

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.

Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.

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.

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.

Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.

Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.

Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.

Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.

Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.

Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.

Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.

Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.

Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.

Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.

Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.

Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.

Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation

Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations

Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context

Use when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries

Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations

Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level

Use when someone has basic awareness of animation principles and wants to start applying them in simple projects

Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes

Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations

Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels

Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied

Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level

Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.

Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.

Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.

Use when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.

Use when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.

Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.

Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.

Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.

Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.

Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting.

Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.

Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.

Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.

Use when creating animations that reassure users, reduce anxiety, or communicate protection and security.

Use when creating animations that convey luxury, refinement, or premium brand experiences.

Use when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.

Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging.

Use when creating animations that evoke happiness, surprise, or delightful moments in the user experience.

Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.

Use when creating animations that convey strength, authority, or bold confidence in brand and product.

Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.

Use when creating animations that build user confidence, establish credibility, and communicate dependability.

Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.

Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.

Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions

Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions

Use when animating cards, panels, tiles, or container elements to create depth and interactivity

Use when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation

Use when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback

Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback

Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states

Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status

Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits

Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions

Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately

Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types

Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences

Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences

Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications

Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards

Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences

Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media

Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces

Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences

Use when designing animations for business tools, project management, collaboration software, or productivity apps

Use when designing animations for social platforms, messaging apps, content sharing, or community features

Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences

Use when designing animations for any industry or when industry-specific guidelines do not apply

Use when implementing Disney's 12 animation principles in Adobe After Effects

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

Use when implementing Disney's 12 animation principles with pure CSS animations and transitions

Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

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

Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects

Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)

Use when implementing Disney's 12 animation principles with Popmotion's functional animation library

Use when implementing Disney's 12 animation principles with React Spring's physics-based animations

Use when implementing Disney's 12 animation principles with Rive interactive animations

Use when implementing Disney's 12 animation principles with any animation tool or framework

Use when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue

Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance

Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product

Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive

Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention

Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication

Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible

Use when building multi-part animation sequences - staggered reveals, choreographed UI, coordinated motion where multiple elements work together

Use when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context

Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb

Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive

Use when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges

Use when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden.

Use when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch.

Use when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.

Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.

Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.

Use when enriching primary animations, adding supporting details, creating depth in motion, or making scenes feel alive without distracting from main action.

Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.

Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.

Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression.

Use when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicated at any given moment.

Use when planning animation workflows, deciding between spontaneous vs controlled approaches, or balancing creative freedom with structural precision.

Use when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.

Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs

Use when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation

Use when animation doesn't match brand personality, feels generic, or clashes with design language

Use when animation feels wrong, creates unintended emotional response, or mismatches context

Use when animation doesn't work as expected, has bugs, or behaves inconsistently

Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort

Use when animation runs slow, janky, or causes frame drops

Use when animation is limited by browser support, platform capabilities, or technical requirements

Use when animation speed feels wrong—too fast, too slow, or inconsistent

Use when facing any animation problem as a comprehensive diagnostic framework

Use when users don't notice feedback, miss state changes, or can't tell if their action worked

Use when animation causes user confusion, delays task completion, or creates frustration