Play on scroll

Holds CSS entrance animations at their first frame until they are scrolled to. From components/motion/PlayOnScroll.tsx. First built for the fourth site. The heading above carries the same attribute as everything below; it was on screen when the page loaded, so it simply played.

<PlayOnScroll />

<section data-play>...</section>
<section data-play data-play-threshold="66%">...</section>
<section data-play="replay">...</section>

data-play: once, when 5% is visible

This block rose into place when you reached it.

data-play-threshold="66%": waits until two thirds of the section is visible

data-play="replay": scroll away and come back, and it plays again

Wiped in from the left, every time.