Reveal

The attribute only marks the element. The Legal and Tech layouts watch every marked element and let it in once a tenth of it is on screen, a single time per page. The Design site has no watcher of its own, so each box below lets its example in the same way, and Replay runs the entrance again. Under reduced motion there is no entrance at all: the element is simply there from the start.

Put it on the block that should arrive, never on something a visitor needs before scrolling, such as the navigation. A hero keeps its copy on FadeUp so the first screen settles quickly.

FadeUp is the default: the element rises a short way as it fades in. Headlines and accordions use it on every brochure page.

Pop grows the element in from slightly smaller with a small overshoot. It suits a card: every feature tile, callout and testimonial uses it.

TiltIn swings the element up from a leftward lean and TiltInRight from a rightward one. Alternate them across a row, as the team cards on the About page do, or give a picture beside copy the lean that points it towards the copy. They pair naturally with Tilt, which then holds the resting angle.