Fade in / Fade out
Keep the same position and size while changing opacity. Try both directions to see the difference between appearing and disappearing.
Watch the card become transparent without moving.
Keep the same position and size while changing opacity. Try both directions to see the difference between appearing and disappearing.
Watch the card become transparent without moving.
Bring content into view from an edge. The direction connects its arrival to a place on the screen.
Choose an edge, then replay the entrance.
Grow a panel gently into its final size as it becomes visible. A small size change is often enough.
The panel grows to its resting size without a bounce.
Go slightly beyond the final size, then settle back. That overshoot gives an arrival a playful emphasis.
Use slow playback to see the overshoot and return.
Uncover an existing surface by moving a clipping boundary. The content itself stays in place.
Watch the left edge uncover the picture and caption together.
Animate the arrival and removal of an item. Keep it visible during its exit, then remove it when that motion finishes.
Remove the notification, then add it again. The exit is shorter.