dylantarre/animation-principles - Page 4

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.

straight-ahead-pose-mastery

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

timing-principle-mastery

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

accessibility-issues

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

attention-management

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

brand-consistency

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

emotional-disconnect

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

implementation-debugging

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

motion-sickness

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

performance-optimization

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

technical-constraints

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

timing-calibration

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

universal-solutions

Use when facing any animation problem as a comprehensive diagnostic framework

user-feedback-clarity

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

ux-friction

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