Responsive Control

beginner

Disable animations per-element below any breakpoint with clean revert behavior.

Disabling Below a Breakpoint

Add data-etch-motion-disabled with a pixel value to disable an animation below that viewport width. When the viewport is narrower, the animation is completely removed and the element reverts to its natural state. This uses GSAP matchMedia for clean revert — not just hiding but fully removing the animation and restoring the element.

<!-- Disable below 768px -->
data-etch-motion="fade-up"
data-etch-motion-trigger="scroll"
data-etch-motion-disabled="768"

<!-- Disable below 1024px -->
data-etch-motion="parallax"
data-etch-motion-trigger="scroll"
data-etch-motion-disabled="1024"

Responsive disable works independently per element. Different elements can have different breakpoints on the same page.

How matchMedia Revert Works

When the viewport crosses the breakpoint: initial-state CSS (opacity: 0, transforms) is removed, ScrollTrigger instances are destroyed, GSAP inline styles are cleared, the element appears in its natural un-animated state. If the viewport is resized back above the breakpoint, the animation re-initializes.