Performance

The content scanner reads page content before any scripts are enqueued. It determines exactly which GSAP modules are needed: no animations = zero JS loaded, entrance only = GSAP core + ScrollTrigger, text animations adds SplitText, scramble adds ScrambleTextPlugin, Flip presets add the Flip module. A page with no animated elements has zero overhead.

When 3+ elements use the same entrance preset, Etch Motion automatically switches from individual ScrollTrigger instances to ScrollTrigger.batch(). This is significantly more performant for pages with many animated elements like card grids, reducing the number of scroll callbacks.

Initial-state CSS includes will-change with the appropriate properties (opacity, transform, filter) for GPU compositing hints. After animation completes, will-change is reset to auto via the onComplete callback, preventing unnecessary GPU memory usage from finished animations.

Use once="true" (the default) so animations clean up after playing. Stick to transform and opacity which are GPU-composited and don't trigger layout/paint. Use data-etch-motion-disabled on mobile to skip complex animations. All entrance presets use only transform and opacity by design.