What is staggering & cascades?

Motion Fundamentals

Staggering & cascades

Also searched as: staggering, stagger, cascade, delay offsets, sequential reveals

Canonical Definition

Staggering is the deliberate time offset applied between multiple related elements in a group, so they enter sequentially in cascade rather than appearing simultaneously.

Duration

3 to 6 frames offset between consecutive items

When a list of features, a grid of cards, or a group of avatars appears on screen, rendering them on the exact same frame creates a harsh, overwhelming flash. Staggering introduces micro-delays (e.g. 3 to 6 frames between each child).

This cascade guides the viewer's eye along a natural path (top-to-bottom or left-to-right) and communicates that the items are distinct components of a whole.

Calculating Delay Offsets in React

Using array indices to parameterize child animation frames

In Remotion, staggering is implemented by passing the array index to offset the input frame to `interpolate()` or `<Sequence>`.

Catalog Implementation/Staggered Fade Up

componenttypographyInspect in catalog

85 lines of React

How this works: A list of typographic lines cascading into view with clean 4-frame delay offsets.

Formula: `const delay = index * 4;`
Natural reading order prioritization
Smooth continuous cascade without visual clutter

StaggerList.tsxtsx

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const StaggerList = ({ items }: { items: string[] }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {items.map((item, index) => {
        const itemFrame = Math.max(0, frame - index * 4); // 4-frame offset per child
        const opacity = interpolate(itemFrame, [0, 10], [0, 1]);
        const translateY = spring({ frame: itemFrame, fps, config: { damping: 14 }, from: 20, to: 0 });

        return (
          <div key={item} style={{ opacity, transform: `translateY(${translateY}px)` }}>
            {item}
          </div>
        );
      })}
    </div>
  );
};

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

Keep stagger intervals tight (2 to 5 frames) so the cascade feels like a single wave rather than a series of disjointed arrivals.

Common Failure Modes (What to avoid)

Stagger offsets that are too long (e.g. 20 frames): a list of 5 items takes over 3 seconds just to finish entering.

Generate with AI

Build staggering & cascades in Animatiq

Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.

Launch in composer

Related motion principles