Agent-Skills.md

Agent Skills: Large Animations (500-800ms)

Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention

UncategorizedID: dylantarre/animation-principles/large-500-800ms

Repository

dylantarre/animation-principles
dylantarreLicense: MIT
52

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dylantarre/animation-principles/tree/HEAD/skills/10-by-time-scale/large-500-800ms

Skill Files

Browse the full folder contents for large-500-800ms.

Download Skill

Loading file tree…

skills/10-by-time-scale/large-500-800ms/SKILL.md

Skill Metadata

Name
large-500-800ms
Description
Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention

Large Animations (500-800ms)

At 500-800ms, animations become events. Users stop and watch. Reserve this duration for significant moments that deserve attention and communicate importance.

Disney Principles at Large Scale

Full Expression of All Principles

Squash & Stretch: Dramatic deformation - 20-30% stretch visible and characterful. Objects feel elastic and alive.

Anticipation: Extended wind-up - 150-200ms anticipation sells the action. Clear "about to happen" signal.

Staging: Sophisticated choreography - multiple elements with clear hierarchy and timing offsets.

Straight Ahead/Pose to Pose: Definitely pose to pose - complex motion needs keyframe control.

Follow Through: Extended settling - elements continue moving 100-200ms after main action completes.

Slow In/Slow Out: Dramatic easing - strong deceleration creates impact at endpoints.

Arcs: Essential - all movement should follow natural curved paths.

Secondary Action: Rich layering - primary, secondary, and tertiary actions possible.

Timing: 30-48 frames at 60fps. Full cinematic range.

Exaggeration: Go bold - this duration supports theatrical expression.

Solid Drawing: Full 3D transforms - depth, perspective, complex rotations.

Appeal: Memorable moments - users will recall these animations.

Easing Recommendations

/* Dramatic entrance */
transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);

/* Powerful deceleration */
transition: all 700ms cubic-bezier(0, 0.55, 0.45, 1);

/* Elastic landing */
transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Smooth, cinematic */
transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);

Best Use Cases

  • Hero image/section reveals
  • Major feature introductions
  • Success/completion celebrations
  • Onboarding sequences
  • Dashboard data loads
  • Portfolio piece reveals
  • First-time user experiences
  • Important state changes

Implementation Pattern

.hero-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: opacity 500ms ease-out,
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered reveal with follow-through */
.hero-title { transition-delay: 0ms; }
.hero-subtitle { transition-delay: 100ms; }
.hero-cta { transition-delay: 200ms; }

Warning Signs

  • If users seem impatient, duration is too long
  • If used for common actions, flow suffers
  • If multiple large animations compete, staging fails

Key Insight

Large animations are moments of theater. They punctuate the experience and create memory. Use sparingly - every large animation should earn its duration.