Transition Sequences

Transition Sequence Animations

Apply Disney's 12 principles to choreographed multi-step motion.

Principle Application

Squash & Stretch: Each element in sequence can compress/expand independently for organic feel.

Anticipation: Sequence starts with a setup phase. Brief pause or gather before motion begins.

Staging: Direct attention through the sequence. Most important element animates first or last.

Straight Ahead vs Pose-to-Pose: Plan keyframes for each step. Map the entire sequence before implementing.

Follow Through & Overlapping: Elements don't move in unison. Stagger starts by 50-100ms. Let motion cascade.

Slow In/Slow Out: Each step eases. The sequence overall should ease too - faster middle, slower ends.

Arcs: Transitions across space follow arcs. Page sliding left curves slightly, not linear slide.

Secondary Action: Primary transition + secondary details. Page slides while elements within fade/scale.

Timing:

• Step overlap: 30-50% of previous step's duration
• Total sequence: 300-800ms for UI, up to 1500ms for dramatic
• Gap between steps: 0-100ms (overlap preferred)

Exaggeration: Sequence itself is exaggeration. Individual steps stay subtle.

Solid Drawing: Maintain spatial consistency. If A goes left, B should come from left.

Appeal: Sequences tell a story. Beginning, middle, end - satisfying resolution.

Timing Recommendations

Implementation Patterns

cssCopy code
/* Staggered sequence */
.sequence-item {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 400ms ease-out forwards;
}

.sequence-item:nth-child(1) { animation-delay: 0ms; }
.sequence-item:nth-child(2) { animation-delay: 80ms; }
.sequence-item:nth-child(3) { animation-delay: 160ms; }
.sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page transition choreography */
.page-exit {
  animation: page-out 250ms ease-in forwards;
}

.page-enter {
  animation: page-in 300ms ease-out 200ms forwards;
}

@keyframes page-out {
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

Sequence Orchestration Formula

javascriptCopy code
// Calculate stagger delays
const items = document.querySelectorAll('.sequence-item');
const totalDuration = 600; // ms
const overlap = 0.4; // 40% overlap

items.forEach((item, index) => {
  const stepDuration = totalDuration / items.length;
  const delay = index * stepDuration * (1 - overlap);
  item.style.animationDelay = `${delay}ms`;
});

Key Rules

1. Overlap steps 30-50% - no gaps, no simultaneous starts
2. Total sequence under 800ms for functional UI
3. Test at 0.5x speed to verify choreography
4. Provide skip option for sequences over 500ms
5. prefers-reduced-motion: instant state change, no sequence