.randomize-<prop>-[min]-[max]

Adds function-based jitter to the hidden state of any spawn: each element rolls its own start pose. Because the engine kills and rebuilds the spawn tween on every replay (.scroll re-enter, .appear re-mount), every replay re-rolls automatically.

Demo - same spawn, different roll every Replay

Press Replay - the three cards below share .spawn-up but each has a different .randomize-rotation-[-30]-[30] and .randomize-x-[-40]-[40] roll, so their entry pose is never identical.

roll A

roll B

roll C

Demo - overrides base spawn value

.randomize-rotation on .spawn-cw replaces the spin - the rolled value is the start, and the engine derives a resting end (scale*→1, opacity→1, transforms→0, filter→blur(0px), clipPath→inset(0%…)) unless the spawn already animates that prop.

cw + random scale/rot

ClassRef

randomize-<prop>-[min]-[max]Function value for prop: e.g. randomize-rotation-[-90]-[90], randomize-x-[-40]-[40], randomize-scale-[0.8]-[1.2]

notesOnly the hidden start is randomized (scrub end stays deterministic); timeline builders (count/scramble/draw-split) are not patched - irrelevant as their props aren't randomize targets

html

<div class="appear spawn-up randomize-rotation-[-25]-[25] randomize-y-[-20]-[20] time-1">…</div>
<div class="appear spawn-blur randomize-filter-[blur(10px)]-[blur(30px)]">…</div>

Has no effect without a spawn class - it is a modifier that injects into the spawn's from via a scoped gsap.fromTo patch (Listeners.js:81 invokePlay). Combine with .scroll or .appear as usual.