Set Transform on the Element, Not a Parent Variable
NEVER: Drive child transforms by writing a CSS variable on the parent during a gesture (`el.style.setProperty('--swipe-amount', …)`) — it invalidates every descendant reading that variable, recalculating styles across the subtree on each pointer move. Set `transform` directly on the one element that moves, and prefer `animate={{ transform: "translateX(100px)" }}` over Motion's main-thread `x`/`y`/`scale` shorthands.
Never drive child transforms by mutating a CSS variable on their parent during a gesture
Bad
Good
Why it matters
Writing element.style.setProperty('--swipe-amount', ...) on a container invalidates every descendant that reads that variable, so the browser recalculates styles across the whole subtree on every pointer move — a recalc storm that shows up as gesture jank long before paint does. Set element.style.transform on the single element that actually moves and let its children ride along inside one composited layer.
The same trap exists in Framer Motion: the x / y / scale shorthand props are driven on the main thread via requestAnimationFrame rather than being hardware-accelerated the way a full transform string is, so they drop frames under load — prefer animate={{ transform: "translateX(100px)" }}.