ElasticSnap

ElasticSnap splits text into individual characters, stretches each one (compressed wide, elongated tall), then snaps it back into its natural shape with an elastic overshoot. The result is a punchy, energetic entrance that feels physical.

elasticSnap is a standalone helper, not a tween property. Call it directly and it returns a Timeline you can play, pause, scrub, and reverse.

---

Default Snap

Out of the box, each character starts compressed horizontally and stretched vertically, then springs to its natural scale(1, 1) with a gentle elastic ease.

ELASTIC

60 FPS

---

Strong Stretch

Crank up stretchY and pair with a y offset so characters fly in from below while squashing back into shape.

SNAP!

60 FPS

---

Soft Bounce

Reduce stretchX/stretchY for a subtle, friendly bounce - good for body copy or secondary labels where you want motion without drama.

Smooth and snappy.

60 FPS

---

API

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

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

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

Options

Option	Default	Description
stretchX	0.5	Starting horizontal scale of each character (< 1 = compressed).
stretchY	1.5	Starting vertical scale of each character (> 1 = elongated).
y	20	Starting vertical offset in pixels.
duration	1	Duration of each character's snap in seconds.
ease	'elastic.out(1, 0.4)'	Easing applied to each character.
stagger	0.03	Delay between each character's start, in seconds.
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.