Module 17: Transitions & Animation — Design & Code Foundations

09

undefined

Motion

Print

📄

Static

No motion possible - everything is fixed

Web

✨

Animated

Motion guides attention, provides feedback

State Changes

Print

Page 1 → Page 2

Instant flip

Turn page - instant state change

Web

Fade, slide, morph

Smooth transitions

Animated transitions between states

Attention

Print

SIZE & COLOR

Visual hierarchy only

Size, color, position guide the eye

Web

MOTION

+ animation

Motion is the strongest attention grabber

Feedback

Print

None

No interaction

No response to reader actions

Web

Instant

Hover, click, focus

Every action gets animated feedback

10

undefined

Motion Perception

undefined

Attention & Motion

undefined

Natural Motion

undefined

11

Animation in the Wild

How top products use motion purposefully.

Parallax Scroll

Products float as you scroll

Principles Identified:

Purpose Animation reveals product details progressively

Performance GPU-accelerated transforms only

Restraint Motion stops when not scrolling

Key insight: Apple uses animation to tell stories, not just decorate. Each motion has meaning.

Gradient Animation

Subtle, continuous motion

Principles Identified:

Subtlety Slow, gentle gradient shifts

Brand Signature animated gradients

Performance CSS-only, no JavaScript

Key insight: Stripe's animations are so subtle you barely notice them, yet they make the site feel alive.

Micro-interactions

Every click has feedback

Principles Identified:

Feedback Button presses, checkmarks, transitions

Speed 100-200ms for instant feel

Consistency Same easing throughout

Key insight: Linear's UI feels incredibly responsive because every interaction has immediate animated feedback.

12

Animation Anti-Patterns

Common mistakes that hurt user experience.

Failure: Too Slow

transition: 1.5s

User waits... and waits...

Fix: Keep transitions under 400ms

transition: 0.2s

Snappy and responsive

Rule: 200-300ms for most UI. 400ms max for complex transitions. Slower animations frustrate users.

Failure: Animating Layout

width: 100px → 200px
Triggers reflow, janky at 60fps

Fix: Only animate transform and opacity

transform: scaleX(2)
GPU-accelerated, smooth

Rule: Never animate width, height, top, left, margin, or padding. Use transform instead.

Failure: No Motion Preference

Animations everywhere

Vestibular disorders triggered

Fix: Respect prefers-reduced-motion

@media (prefers-reduced-motion) {
* { animation: none; }
}

Rule: Always provide reduced-motion alternatives. Some users experience nausea or seizures from animation.

Failure: Infinite Loops

🔄 Spinning forever

Distracting, drains battery

Fix: Limit continuous animation

Load → Spin → Stop

Animation has purpose and end

Rule: Infinite animations should be subtle or have clear purpose (loading). Stop animations when not needed.

13

Animation Testing

How to ensure animations are performant and accessible.

01

60fps Test

Tests: Performance

Open DevTools Performance tab. Record while triggering animations. Look for dropped frames (red). Target: solid 60fps green bars.

Red = dropped frame

02

Paint Flash

Tests: Repaints

DevTools → More tools → Rendering → Paint flashing. Green flashes show repaints. Animations should NOT cause large green areas - only the animated element.

Only animated element should flash

03

Reduced Motion

Tests: Accessibility

Enable reduced motion in OS settings. Reload your site. All animations should be disabled or significantly reduced. Essential functionality must still work.

System Preferences → Accessibility

→ Display → Reduce motion

04

Battery Test

Tests: Efficiency

Check CPU/GPU usage during animations. Continuous animations should use minimal resources. Test on mobile devices where battery matters most.

🔋

Monitor Activity Monitor / Task Manager

14

Animation Implementation

Production-ready CSS for smooth animations.

.button {
  background: #3b82f6;
  transform: translateY(0);
  transition: 
    transform 0.15s ease-out,
    background 0.15s ease-out;
}

.button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
  transition-duration: 0.05s;
}

Button Hover via CSS

transform: translateY - GPU-accelerated vertical movement
0.15s ease-out - Quick, decelerating feel
:active shorter - Instant feedback on click

Tip: Use transform instead of margin-top or top for smooth, jank-free hover effects.

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

Fade In via CSS

opacity + transform - Both are cheap to animate
ease-out - Decelerates as element arrives
forwards - Keeps final state after animation

Tip: Combine opacity with subtle transform for more natural entrance animations.

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e5e5;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Loading Spinner via CSS

border technique - Lightweight, no images needed
linear timing - Constant speed for spinners
transform: rotate - GPU-accelerated rotation

Tip: Linear timing is appropriate for spinners - they should feel mechanical and continuous.

/* Default: with motion */
.element {
  transition: transform 0.3s ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

Reduced Motion via CSS

prefers-reduced-motion - Respects OS accessibility setting
transition: none - Disables transitions
animation-duration: 0.01ms - Effectively disables animations

Tip: Always include reduced-motion styles. It's not optional - it's accessibility.

15

Self-Assessment

Test your understanding of animation principles.

Q1

Why should you only animate transform and opacity?

Click to reveal

Q2

What timing function should you use for elements entering the screen?

Click to reveal

Q3

What is the ideal duration range for UI transitions?

Click to reveal

Q4

How do you respect users who prefer reduced motion?

Click to reveal

Q5

What's the difference between transitions and keyframe animations?

Click to reveal

Transitions & Animation

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Animation in the Wild

Common Failures

Animation Anti-Patterns

Visual Tests

Animation Testing

60fps Test

Paint Flash

Reduced Motion

Battery Test

CSS Implementation

Animation Implementation

Self-Assessment

Self-Assessment

Key Takeaways