Attribute Reference

intermediate

Every data-etch-motion-* attribute with types, defaults, and usage examples.

Core Attributes

These are used on every animated element. data-etch-motion (string, required) — the preset ID. data-etch-motion-trigger (string, default: scroll) — when to fire: scroll, hover, click, or load. data-etch-motion-duration (number, default: 0.8) — animation duration in seconds. data-etch-motion-delay (number, default: 0) — delay before start. data-etch-motion-ease (string, default: power2.out) — GSAP easing function. data-etch-motion-once (boolean, default: true) — play once or replay on re-enter.

data-etch-motion="fade-up"
data-etch-motion-trigger="scroll"
data-etch-motion-duration="0.8"
data-etch-motion-delay="0"
data-etch-motion-ease="power2.out"
data-etch-motion-once="true"

The trigger attribute is critical for conditional loading. Without trigger="scroll" in the HTML, ScrollTrigger.min.js won't load and scroll-based animations can't fire.

ScrollTrigger Attributes

data-etch-motion-scroll-start (string, default: "top 85%") — ScrollTrigger start position. data-etch-motion-scroll-end (string) — ScrollTrigger end position. data-etch-motion-scroll-scrub (boolean/number) — link animation to scroll. true for instant, number for smooth (0.5 recommended). data-etch-motion-scroll-pin (boolean) — pin element during scroll animation.

data-etch-motion="scrub-fade-in"
data-etch-motion-trigger="scroll"
data-etch-motion-scroll-start="top 80%"
data-etch-motion-scroll-end="top 30%"
data-etch-motion-scroll-scrub="0.5"

Text Attributes

data-etch-motion-split (string, default: "words") — how to split: chars, words, or lines. data-etch-motion-stagger (number, default: 0.05) — delay between split elements. data-etch-motion-scramble-chars (string, default: "upperCase") — character set for text-scramble.

data-etch-motion="text-rotate-in"
data-etch-motion-trigger="scroll"
data-etch-motion-split="chars"
data-etch-motion-stagger="0.03"

Parallax & Counter Attributes

data-etch-motion-parallax-speed (number, default: -0.3) — speed multiplier, negative = opposite to scroll. data-etch-motion-parallax-direction (string, default: "vertical"). data-etch-motion-counter-start/end (number) — start and target values. data-etch-motion-counter-prefix/suffix (string) — text before/after number. data-etch-motion-counter-decimals (number, default: 0).

data-etch-motion="counter"
data-etch-motion-trigger="scroll"
data-etch-motion-counter-start="0"
data-etch-motion-counter-end="2500"
data-etch-motion-counter-prefix="$"

Interaction Attributes

data-etch-motion-tilt-max (number, default: 15) — max tilt degrees. data-etch-motion-tilt-perspective (number, default: 1000). data-etch-motion-magnetic-strength (number, default: 0.3, range 0-1). data-etch-motion-spotlight-size (number, default: 200) — radius in px. data-etch-motion-bg-color/bg-direction — for hover-background-slide. data-etch-motion-flip-class (string) — CSS class toggled for Flip. data-etch-motion-cursor-size/color/blend — cursor follower config.

Responsive & Stagger

data-etch-motion-disabled (number) — disable animation below this viewport width in px. Uses GSAP matchMedia for clean revert. data-etch-motion-stagger (number, on parent) — stagger delay between children. data-etch-motion-target (string, CSS selector) — which children to stagger.

data-etch-motion-disabled="768"

data-etch-motion-stagger="0.1"
data-etch-motion-target=".card"

The disabled attribute uses GSAP matchMedia. When the viewport crosses the breakpoint, animations are fully removed and elements return to their natural state.