Paused off-screen animations

Enable the feature

In Visual features, enable Pause off-screen animations. GeneratePerf then loads a small stylesheet and script (about 1 KB each before compression).

Use it

Add the class pause-offscreen to any element that has a CSS animation, such as a logo marquee or a looping illustration:

<div class="marquee pause-offscreen">…</div>

The animation runs only while the element is visible in the window and pauses as soon as it leaves it. Visitors who ask their system to reduce motion (prefers-reduced-motion) do not see the animation at all.

The class applies to the element that carries it. For animations on its children, pause them from your own CSS while the parent does not have the playing class, which GeneratePerf adds when the element is visible:

.my-block.pause-offscreen:not(.playing) > * { animation-play-state: paused; }

Scripts that add animated elements after the page has loaded can register them with window.generateperfPauseOffscreen.observe().