Spawn - entrance animations

Spawn classes animate an element in: they apply a hidden from state, then tween to its natural one. Every spawn automatically gains ordering (.order / .priority-N / .reverse), timing tunables, scroll & appear variants, a leave-reverse and a split-text flavour.

Directional

spawn-up

spawn-down

spawn-left

spawn-right

Fade / blur / spin

spawn-fade

spawn-blur

spawn-cw

spawn-ccw

3D flips

Full 360° flips around the X or Y axis with a depth scale - card-like unfolds.

spawn-x-up

spawn-x-down

spawn-y-right

spawn-y-left

Tunables

time-NDuration in seconds (.time-1 default)

ease-NAMEAny GSAP ease name: back, expo, power2.out…

priority-NStagger offset when combined with .order

orderSequences all .order elements by DOM position

reverseFlips the .order sequence

delayAlias for priority-based delay without .order

preserveFreezes an already-wired element (and children) on re-init - new mounts under a preserved ancestor still animate (needs data-gsap-wired)

html

<div class="appear scroll spawn-up time-2 ease-back order">…</div>
<div class="appear scroll spawn-fade priority-3">…</div>

Spawns respect the CSS-defined opacity of their target: a disabled:opacity-50-style resting value is restored at the end of the tween instead of being forced to 1.