Entrance

Things arriving: fades, slides, pops, reveals and the first moments of a page. 8 animations.

The workhorse entrance: content fades in while rising a few pixels into place.

Items enter one after another using a per-item delay set from a CSS variable.

Scale in with a springy overshoot, using the CSS linear() easing function instead of a library.

Content resolves from a soft blur to sharp, with a slight scale settle. Feels like a camera focusing.

An image is uncovered by an expanding clip-path while it zooms out slightly.

Four reusable classes slide an element in from the left, right, top or bottom.

A card swings up from flat on its back to face the viewer, using perspective and rotateX.

A choreographed page load: eyebrow, headline lines, text and button arrive in order from one timing system.