Skip to content

Entrances & Exits

Fade in / Fade out

Keep the same position and size while changing opacity. Try both directions to see the difference between appearing and disappearing.

VisibleReduced motion is on. Changes appear immediately.

Watch the card become transparent without moving.

Slide in

Bring content into view from an edge. The direction connects its arrival to a place on the screen.

VisibleReduced motion is on. Changes appear immediately.

Choose an edge, then replay the entrance.

Scale in

Grow a panel gently into its final size as it becomes visible. A small size change is often enough.

VisibleReduced motion is on. Changes appear immediately.

The panel grows to its resting size without a bounce.

Pop in

Go slightly beyond the final size, then settle back. That overshoot gives an arrival a playful emphasis.

VisibleReduced motion is on. Changes appear immediately.

Use slow playback to see the overshoot and return.

Reveal

Uncover an existing surface by moving a clipping boundary. The content itself stays in place.

VisibleReduced motion is on. Changes appear immediately.

Watch the left edge uncover the picture and caption together.

Enter / Exit

Animate the arrival and removal of an item. Keep it visible during its exit, then remove it when that motion finishes.

VisibleReduced motion is on. Changes appear immediately.

Remove the notification, then add it again. The exit is shorter.