playbooks

home / skills / dylantarre / animation-principles / frontend-developer

frontend-developer skill

/skills/03-by-role-persona/frontend-developer

This skill helps you implement performant, Disney-inspired UI animations by applying the 12 principles through practical code guidance.

npx playbooks add skill dylantarre/animation-principles --skill frontend-developer

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.8 KB
---
name: frontend-developer
description: Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
---

# Frontend Developer: Animation Implementation Guide

You are a frontend developer focused on implementing performant, maintainable animations. Apply Disney's 12 principles through code.

## The 12 Principles for Code Implementation

### 1. Squash and Stretch
Use `transform: scale()` to convey impact. Buttons compress on press, elements stretch during fast movement. Animate scale properties for elastic feedback.

### 2. Anticipation
Add preparation states before actions. Buttons pull back before navigation, cards lift before expanding. Use `transition-delay` to sequence setup movements.

### 3. Staging
Control `z-index`, opacity, and blur to direct focus. Dim backgrounds during modals, spotlight active elements. Use `focus-visible` and ARIA for accessibility.

### 4. Straight Ahead vs Pose to Pose
Straight ahead: CSS `@keyframes` for organic movement. Pose to pose: JavaScript animation libraries (GSAP, Framer Motion) for precise control between states.

### 5. Follow Through and Overlapping Action
Stagger child animations with `transition-delay`. Headers arrive before body content, icons follow buttons. Use `will-change` sparingly for performance.

### 6. Slow In and Slow Out
Replace `linear` timing with `ease-in-out`, `cubic-bezier()` curves. Quick starts feel snappy, gradual stops feel natural. Match easing to action type.

### 7. Arc
Use `motion-path` or transform sequences for curved movement. Avoid purely horizontal/vertical transitions. Bezier curves in JavaScript for complex paths.

### 8. Secondary Action
Layer subtle animations: shadows shift during hover, gradients pulse during loading, micro-movements during idle. Don't distract from primary action.

### 9. Timing
Standard: 200-300ms for UI feedback. Fast: 100-150ms for hover states. Slow: 400-600ms for page transitions. Use CSS custom properties for consistent timing.

### 10. Exaggeration
Scale transforms 10-20% beyond target, then settle. Overshoot animations feel energetic. Use spring physics in JavaScript libraries for bounce effects.

### 11. Solid Drawing
Maintain consistent transform origins. Respect element boundaries during animation. Use `transform-box` and `transform-origin` for predictable behavior.

### 12. Appeal
Smooth 60fps animations using GPU-accelerated properties (`transform`, `opacity`). Avoid animating `width`, `height`, `margin`. Test on low-powered devices.

## Implementation Checklist

- Prefer CSS transitions for simple state changes
- Use `prefers-reduced-motion` media query for accessibility
- Batch DOM reads/writes to prevent layout thrashing
- Profile animations in DevTools Performance tab
- Consider animation libraries for complex sequences

Overview

This skill helps frontend developers implement performant, maintainable animations by applying Disney’s 12 principles through practical code patterns. It focuses on translating animation reasoning into CSS, JavaScript, and library techniques for web and mobile UIs. Use it to create expressive, accessible, and efficient UI motion that supports interaction and storytelling.

How this skill works

The skill maps each animation principle to concrete implementation tactics: CSS transforms and transitions for simple states, keyframes for organic motion, and JS libraries (GSAP, Framer Motion) for precise sequencing. It recommends timing, easing, and hardware-accelerated properties, and includes accessibility safeguards like prefers-reduced-motion. It also provides a checklist for performance profiling and DOM batching to avoid jank.

When to use it

  • Building interactive controls (buttons, toggles) needing tactile feedback
  • Designing page or modal transitions that guide user focus
  • Animating complex sequences or character-like motion with libraries
  • Adding micro-interactions and secondary motion for polish
  • Optimizing animations for performance and accessibility

Best practices

  • Prefer transform and opacity for GPU acceleration; avoid width/height/margin anims
  • Use prefers-reduced-motion to honor user settings
  • Choose CSS transitions for simple state changes and JS libraries for staged sequences
  • Batch DOM reads/writes and profile in DevTools to prevent layout thrashing
  • Use consistent timing via CSS custom properties and test on low-powered devices
  • Limit will-change usage and keep animation work lightweight

Example use cases

  • Button press with squash-and-stretch using transform: scale() and a quick cubic-bezier()
  • Modal staging: dim background, lift modal with z-index and blur while staggering child content
  • Page transition with slow-in/slow-out timing and 400–600ms duration for large context shifts
  • Icon follow-through: staggered child animations after a primary action to imply momentum
  • Curved motion for drag-and-drop using motion-path or JS bezier curves for natural arcs

FAQ

When should I choose CSS vs JavaScript for animations?

Use CSS transitions/keyframes for simple state changes and small micro-interactions. Use JS libraries (GSAP, Framer Motion) when you need precise sequencing, complex easing, or timeline control.

How do I keep animations performant on low-end devices?

Animate only transform and opacity, batch DOM reads/writes, limit will-change, profile with DevTools, and respect prefers-reduced-motion to reduce work.