Jigsaw

Jigsaw scatters every character to a random position, rotation, and scale - then snaps them all into place. The result looks like puzzle pieces flying in and locking together.

jigsaw is a standalone helper, not a tween property. It returns a Timeline you can play, pause, scrub, and reverse.

---

Default

All options default to a dramatic reveal: up to ±200 px of scatter, ±180° rotation, and a random stagger order.

JIGSAW

60 FPS

---

Custom Spread

Widen the scatter and snap from the centre outward using stagger: { from: 'center' }.

EXPLODE

60 FPS

---

Gentle Snap

Tighten the spread and rotation for a subtler snap that works on body-sized text.

Soft landing.

60 FPS

---

API

import { jigsaw } from 'animx/plugins/Text'

const tl = jigsaw(target, config)
tl.play()

Returns a Timeline. All playback methods (pause, reverse, seek, kill) are available.

Options

Option	Default	Description
spreadX	200	Maximum horizontal scatter distance in pixels.
spreadY	200	Maximum vertical scatter distance in pixels.
rotation	180	Maximum random rotation in degrees (±).
scale	random 0.5-1	Starting scale for each character.
duration	1.2	Duration of each character's snap animation.
ease	'back.out(1.2)'	Easing applied to each character.
stagger	{ amount: 0.8, from: 'random' }	Stagger config forwarded to AnimX.
revertOnComplete	false	Remove split spans and restore the original DOM on completion.
onCharStart(el, i)	-	Callback fired when each character begins animating.

All other standard tween options (repeat, yoyo, onComplete, etc.) are forwarded to the inner tween.