css-* - arbitrary property animations

Animate any numeric GSAP property straight from the class name - no config entry required:

text

css-<prop>-<from>-<to>          ping-pong loop
spawn-css-<prop>-<from>-<to>    plays once on load/appear
hover-css-<prop>-<from>-<to>    ping-pongs while hovered
click-css-<prop>-<from>-<to>    one out-and-back per press

hover-css-<prop>-<to>           hold value while hovered
click-css-<prop>-<to>           go to value while pressed

Demo

css-y-0-25 (loop)

hover-css-scale

click-css-rotation

hover-css-opacity

Value rules

numbersIntegers or decimals, negatives allowed: css-x--20-20

hex colours#RGB / #RRGGBB / #RRGGBBAA: css-background-color-#1e293b-#0ea5e9

rest stateFor loops/hovers, `from` should equal the resting value

Property names are single GSAP/CSS words (y, x, scale, opacity, rotation, …). Hover/click variants wrap the element in a stable hit area like .wrapdiv does.