---
name: storyboarding
description: Animation storyboarding and pre-visualization documentation. Use when planning complex animations, documenting motion sequences, or creating style frames for stakeholder review.
---

# Animation Storyboarding

Pre-visualization and documentation for motion design projects.

## Storyboard Components

### Frame Elements

| Element | Purpose | Notation |
|---------|---------|----------|
| **Key Frame** | Major pose/state | Solid border |
| **Breakdown** | In-between frame | Dashed border |
| **Hold** | Static duration | "H" + frame count |
| **Anticipation** | Wind-up frame | Arrow pointing back |
| **Follow-through** | Overshoot frame | Wavy line |

### Timing Annotations

```
[Frame 1]──(12f)──[Frame 2]──(6f)──[Frame 3]
    │                │                │
    Start         Midpoint           End
    ease-out      linear         ease-in
```

## Storyboard Template

```markdown
## Scene: [Name]
Duration: [Total frames/seconds]
Context: [What triggers this animation]

### Beat 1: [Name]
- Frame: [#]
- Duration: [X]f / [Y]ms
- Easing: [curve name]
- Description: [What happens]
- Properties: [transform, opacity, etc.]

[Sketch/Wireframe placeholder]

### Beat 2: [Name]
...
```

## Style Frames

### Key Moments to Capture

1. **Initial State** - Before animation begins
2. **Anticipation Peak** - Maximum wind-up
3. **Action Midpoint** - 50% through main motion
4. **Overshoot** - Past final position (if applicable)
5. **Settle** - Final resting state

### Style Frame Specification

```json
{
  "scene": "Modal Open",
  "frame": 3,
  "timestamp": "0.15s",
  "progress": 0.5,
  "properties": {
    "opacity": 0.8,
    "scale": 1.05,
    "y": -8,
    "blur": 2
  },
  "easing": "emphasized-decelerate",
  "notes": "Peak overshoot before settle"
}
```

## Motion Arc Documentation

### Arc Diagram

```
Value
  │
1.0├─────────────────────────────●───────
   │                          ╱
   │                        ╱
   │                     ╱
   │                  ╱
0.5├───────────────●
   │            ╱
   │         ╱
   │      ╱
   │   ╱
0.0├──●────────────────────────────────────
   0%        50%                    100%
                    Time
```

### Easing Visualization

```
Standard (0.2, 0, 0, 1):
▓▓▓▓░░░░░░░░░░░░░░░░
████▓▓▓▓░░░░░░░░░░░░
██████████▓▓▓▓░░░░░░
████████████████▓▓▓▓
████████████████████

Emphasized-decelerate (entrance):
▓▓▓▓▓▓▓▓░░░░░░░░░░░░
██████████▓▓▓▓░░░░░░
██████████████▓▓░░░░
████████████████▓▓░░
████████████████████
```

## Timing Breakdown

### Frame-by-Frame Analysis

| Frame | Time | Property | Value | Note |
|-------|------|----------|-------|------|
| 0 | 0ms | scale | 0.95 | Initial |
| 3 | 50ms | scale | 1.02 | Overshoot |
| 6 | 100ms | scale | 0.99 | Settle |
| 9 | 150ms | scale | 1.00 | Final |

### Duration Calculator

```javascript
// Convert seconds to frames
const fps = 60;
const seconds = 0.3;
const frames = Math.round(seconds * fps); // 18 frames

// Convert frames to milliseconds
const frameToMs = (frame, fps = 60) =>
    Math.round((frame / fps) * 1000);
```

## Sequence Notation

### Linear Sequence

```
[A]──(300ms)──[B]──(200ms)──[C]
```

### Parallel Sequence

```
[A]──(300ms)──[B]
         ├────────[C]  (starts at 150ms)
         └────────[D]  (starts at 200ms)
```

### Staggered Sequence

```
[A1]──[A2]──[A3]──[A4]──[A5]
  │     │     │     │     │
  0    50ms  100ms 150ms 200ms
```

## Tool Workflows

### Figma Storyboard

1. Create frame for each key moment
2. Use auto-layout for consistent sizing
3. Add timing annotations as text
4. Link to prototype for context

### After Effects Planning

1. Marker annotations on timeline
2. Shape layer for motion paths
3. Expression links for documentation
4. Render style frame sequence

### Code-First (Remotion/GSAP)

```javascript
// Document as timeline data
const storyboard = [
  {
    id: 'intro',
    start: 0,
    duration: 30, // frames
    elements: ['logo', 'tagline'],
    notes: 'Logo scales in, tagline fades'
  },
  {
    id: 'content',
    start: 30,
    duration: 60,
    elements: ['card1', 'card2', 'card3'],
    notes: 'Cards stagger in from bottom'
  }
];
```

## Review Checklist

### Pre-Production Review

- [ ] All key frames documented
- [ ] Timing annotations complete
- [ ] Easing curves specified
- [ ] Reduced motion alternative noted
- [ ] Performance considerations flagged

### Stakeholder Presentation

- [ ] Style frames exported as images
- [ ] Timing breakdown table included
- [ ] Interactive prototype linked
- [ ] Technical constraints noted

## Related Skills

- **Dependencies:** easing, duration, sequencing
- **See also:** motion-specs, orchestrator
- **Output formats:** Figma, PDF, JSON timeline