Reveal on scroll

A small fade as a section arrives. Used sparingly it draws the eye down a long report; used everywhere it makes a dashboard feel slow. It does nothing at all for a reader who has asked for less motion.

Scroll down

Each card below fades up as it comes into view, once. An IntersectionObserver adds a class the first time the element is 15% visible and then stops watching it, so nothing is recalculated as you scroll back and forth.

Revenue

$408,600.00

Sales and services, net of credit notes.

Cost of sales

$112,400.00

What it cost to deliver that revenue.

Operating expenses

$408,600.00

Salaries, premises and running costs.

Tax

$45,829.75

Collected less reclaimed, this quarter.

Net profit

$129,280.15

What is left, and what feeds retained earnings.

Two rules

Nothing is hidden until the script runs. The class that fades an element in is added by the observer; without JavaScript every section is simply there. A page that starts blank and stays blank when a script fails is not an acceptable trade for an animation.
It is off entirely under prefers-reduced-motion. Not shortened — off. Everything is marked as arrived at once and the observer is never created.