Scroll.

A shape with no front and no back, so every angle in the track works as written. Click it to change the finish.

The pin is CSS

The canvas is a sticky element. The browser holds it in place on its own compositor, so it stays put even while the page is busy doing something else. No script touches its position.

Measured once

Where the track starts and how long it runs are read one time, and again only if the window changes. After that, working out how far you have scrolled is a subtraction and a divide. The page is never asked to lay itself out again.

Five poses

The whole animation is five positions and the curves between them. Each one is a fraction of the window rather than a fixed distance, so the same five work on a phone and on a wide monitor.

What it costs

No animation library, no smooth scroll library, no build step. The scrollbar still works, find in page still works, and it stops the moment you do.