Container 3.1.0
Improve performance by rendering child animations only when the parent container is visible.
Overview
The Container utility improves performance by deferring child animations until the parent container enters the viewport. This ensures that animations are only rendered when visible, reducing unnecessary processing.
Webpages are often divided into large section blocks, many of which extend beyond the viewport. While each section might contain animations, it’s unnecessary to render them all at once. By adding data-tor-container to each section, TorusKit detects which container is currently in the viewport and automatically triggers its child animations—offloading the rest until they’re visible.
Example
Many websites use a structure like this one, where each content block is wrapped in its own <section> element. By adding data-tor-container to these sections, animations inside them will only play when the container is visible in the viewport.