Roll Out
The element rolls off to the right while fading out.
Use for
Playful list item removal
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 "Roll Out" exit animation to [where].
The element should roll off to the right like a wheel, turning as it travels, while fading out: smooth, speeding up as it leaves.
Remove it from the layout only after it has rolled away, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).Similar motions
A
The element spins around a pivot while fading away.
Use for
Playful dismissal of items
Add a "Rotate Out" exit animation to [where].
The element should spin around its center, a little over half a turn, while fading away: smooth, speeding up as it goes.
Remove it only after the spin ends, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).A
Slide Out
Also called Slide Out Up, Slide Out Down
The element glides out past a container edge and disappears.
Use for
Closing drawers and panels
Add a "Slide Out" exit animation (also called slide out up or slide out down) to [where].
The element should glide out past its container edge and disappear, staying fully opaque: quick, accelerating as it leaves.
Clip it at the container edge, hide it from keyboard and screen readers once it is out of view, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).A
The element rolls in from the left like a wheel while fading in.
Use for
Playful list item entrance
Add a "Roll In" entrance animation to [where].
The element should roll in from the left like a wheel, turning as it travels, while fading in: smooth, slowing down as it lands.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
The element swings on a top-left hinge, dangles, and then drops off the screen.
Use for
Comic-style removal of an element
Add a "Hinge" exit animation to [where].
The element should swing down from its top-left corner as if a screw came loose, dangle back and forth, then drop off the screen while fading: slow, comic and deliberate.
Let it fall over other content without pushing the layout or adding scrollbars, remove it once it has dropped, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).More in Entrance & Exit
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
Slide In
Also called Slide In Up, Slide In Down, Slide In Left, Slide In Right
The element glides in from off its container edge to its resting position without fading.
Use for
Drawers, side panels, banners
Add a "Slide In" entrance animation (also called slide in left, slide in right, slide in up or slide in down) to [where].
The element should glide in from beyond its container edge to its resting place, fully opaque the whole time: quick, decelerating smoothly with no bounce.
Clip it at the container edge so it doesn't overlap neighbours or cause scrollbars while it is outside, and show it in place when the user prefers reduced motion (prefers-reduced-motion).