Hover & Interactions

Use mouseenter/mouseleave events (not CSS :hover) so GSAP controls timing and easing. All revert cleanly on mouse leave. hover-lift (8px up + shadow), hover-scale (1.05x), hover-scale-down (0.97x press effect), hover-underline (animated underline draw), hover-background-slide (color slides in from configurable direction), hover-border-draw (border draws progressively).

data-etch-motion="hover-lift"
data-etch-motion-trigger="hover"

Use mousemove with requestAnimationFrame for 60fps tracking. hover-tilt (3D perspective card tilt following cursor, max 15deg), hover-magnetic (element subtly follows cursor within bounds, strength 0.3), hover-spotlight (radial gradient light follows cursor over surface, 200px radius).

data-etch-motion="hover-tilt"
data-etch-motion-trigger="hover"
data-etch-motion-tilt-max="15"
data-etch-motion-tilt-perspective="1000"

Creates a custom circular cursor element following the mouse within the parent using gsap.quickTo(). The parent gets cursor: none. Auto-scales on hoverable children. Created dynamically (not in HTML), has aria-hidden="true" and pointer-events: none.

data-etch-motion="cursor-follower"
data-etch-motion-trigger="hover"
data-etch-motion-cursor-size="40"
data-etch-motion-cursor-color="rgba(108,60,224,0.3)"
data-etch-motion-cursor-blend="difference"

GSAP Flip records element state, you toggle a CSS class, Flip animates the difference. flip-expand toggles between compact/expanded states on click. flip-layout animates when children reorder or resize. You must provide CSS for both states. Etch Motion handles the animation. Cleanup removes temporary inline styles after completion.

data-etch-motion="flip-expand"
data-etch-motion-trigger="click"
data-etch-motion-flip-class="is-expanded"

/* Your CSS: */
.card 
.card.is-expanded