Jack In The Box
The element pops up from a small rotated state, overshoots, and settles like a jack-in-the-box toy.
Use for
Surprise reveal
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Jack In The Box" entrance animation to [where].
The element should pop up from a tiny, tilted state anchored at its bottom edge, rock from side to side past upright, and settle: springy and playful.
Play it once only, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).Similar motions
A
Bounce In
Also called Bounce In Down, Bounce In Up
The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.
Use for
Notification badges, playful modals
Add a "Bounce In" entrance animation (also called bounce in down or bounce in up) to [where].
The element should grow from small, overshoot its full size and wobble a few times before settling: quick and springy.
Play it once so it doesn't keep pulling attention, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Swirl In
Also called Swirl In Forward
The element spins and scales up from a point while fading in.
Use for
Decorative element or logo entrance
Add a "Swirl In" entrance animation (also called swirl in forward) to [where].
The element should spin well past a full turn while growing from a single point to full size and fading in: fast at first, slowing as it settles.
Play it once on a single element rather than a whole group, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Rotate In
Also called Rotate In Down Left
The element spins in around a corner or its center while fading in.
Use for
Playful icon or card entrance
Add a "Rotate In" entrance animation (also called rotate in down left) to [where].
The element should swing into place around its bottom-left corner from a tilted angle while fading in: smooth and unhurried, easing out as it settles.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Back In
Also called Back In Up, Back In Down
The element starts scaled down and offset, then slides in and grows to full size.
Use for
Hero elements and cards
Add a "Back In" entrance animation (also called back in up or back in down) to [where].
The element should arrive from beyond an edge while shrunk and slightly faded, then grow to full size once it reaches its place: a deliberate two-step move rather than a quick pop.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).More in Entrance & Exit
A
Light Speed In
Also called Lightspeed In
The element shoots in from the side with a skew that straightens as it lands.
Use for
Dramatic banner or headline entrance
Add a "Light Speed In" entrance animation (also called lightspeed in) to [where].
The element should shoot in fast from the side, slanted as if moving at speed, then overcorrect the slant once and straighten as it lands: fast and dramatic, slowing at the end.
Keep it from causing a horizontal scrollbar while it is still off-screen, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Light Speed Out
Also called Lightspeed Out
The element skews and speeds off to the side while fading.
Use for
Dramatic dismissal
Add a "Light Speed Out" exit animation (also called lightspeed out) to [where].
The element should slant and speed off to the side while fading out: fast, accelerating as it leaves.
Keep it from causing a horizontal scrollbar as it passes the edge, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).A
Puff In / Puff Out
Also called Puff
The element scales from a large, blurred, transparent state down into focus, like a puff of smoke, or the reverse when leaving.
Use for
Soft object appearance
Add a "Puff In / Puff Out" animation (also called puff) to [where].
When it appears, the element should shrink from a large, blurred, transparent state into sharp focus like a settling puff of smoke; when it leaves, it should swell back into a blur and vanish: soft and fairly quick.
Keep the enlarged state from pushing the layout or causing scrollbars, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).