What is transition-sequences?

This Claude skill specializes in orchestrating complex, multi-step UI animations and seamless page transitions by applying Disney's 12 principles of motion. It provides developers and designers with precise timing frameworks, staggered delay formulas, and implementation patterns in CSS and JavaScript. By focusing on professional choreography—including anticipation, staging, and follow-through—it transforms static interfaces into fluid, high-quality user experiences while maintaining accessibility standards like reduced motion support.

When should I use transition-sequences?

transition-sequences is useful in the following scenarios: • Seamless Page Transitions: Creating fluid motion between application states to maintain user context and reduce perceived loading times. • Interactive Onboarding Flows: Designing multi-step welcome sequences that use staggered animations to guide users through product features without overwhelming them. • Complex UI Reveals: Implementing sophisticated 'hero' animations or dramatic content reveals using secondary actions and arcs for a premium brand feel. • Functional Wizard Steps: Orchestrating step-by-step form transitions that provide clear visual feedback and spatial consistency during user tasks. • Micro-interactions & Feedback: Applying squash-and-stretch or anticipation to buttons and modals to make digital interfaces feel more organic and responsive.

name	transition-sequences
description	Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.

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

Sequence Type	Total Duration	Step Count	Step Overlap
Tab Change	300ms	2	50%
Page Transition	500-600ms	2-3	30%
Modal Open	400ms	3	40%
Wizard Step	400ms	2	50%
Onboarding	800-1200ms	4-6	30%
Dramatic Reveal	1000-1500ms	5-8	40%

Implementation Patterns

/* 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

// 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

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

transition-sequences

When & Why to Use This Skill

Use Cases