Staggered entrance

Introduce related elements one after another with small delays.

Live preview Try the effect

MOTION PREVIEW

New project

Invite team

Publish

240ms · ease-out

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Introduce related elements one after another with small delays. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Short lists and groups of newly revealed items.

Related concepts

Staggering offsets start times; it does not require different effects for each element.

Describe this effect

Output language

Reveal related list entries in order with a short delay between each, keeping the total sequence brief. Use a 240ms ease-out transition. Show the final state immediately when reduced motion is requested.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.