Text Animations

Scroll-triggered rolling counter that animates digits like a mechanical odometer. Works with any number format including currency symbols, commas, periods, and suffixes. Supports custom start values, stagger order, and programmatic updates.

Scroll-triggered text reveal where each line of text is covered by a colored bar that scales away as it enters the viewport, mimicking the look of a highlight marker being drawn across the text.

Each character in a heading responds to pointer proximity by smoothly adjusting its variable font weight. Characters closest to the cursor become heaviest; those farther away fade back to the minimum weight.

A continuously scrolling text marquee rendered on an SVG arc. The curvature, speed, spacer character, and colors are all configurable via data attributes. Font styles are mirrored from the source element into the SVG automatically.

A heading with one rotating word slot that cycles through a comma-separated list. Each word slides out upward and the next slides in from below, with the wrapper width animating smoothly between word lengths.

As each line of a heading scrolls to the top of the viewport it shatters into individual characters that fall downward with randomised velocity, spin, and gravity — as if hitting a roof and crumbling off screen.

Characters in a heading fade from a low opacity to fully visible as the user scrolls, creating a smooth word-by-word highlight effect driven entirely by scroll position. No pseudo-elements or duplicate DOM nodes required.

Scroll-triggered text reveal where lines, words, or characters slide up from behind a hidden mask as the element enters the viewport. Includes a production-ready function with per-element split-type control and a simple basic version.

Multiple headings are stacked in a sticky viewport container and revealed one after another as the user scrolls. Each heading's characters animate in from invisible, then fade out in reverse before the next heading appears.

Text lines are covered by animated skeleton placeholder blocks that pulse between two theme colors before fading out to reveal the actual content underneath — mimicking a content-loading skeleton UI pattern.

Three scramble text patterns in one script: characters randomise on page load, on scroll entry, and on hover. Uses GSAP's ScrambleTextPlugin with SplitText for a per-word scramble effect, with configurable character sets.

A vertically looping word list where the centred word is highlighted by a corner-bracket selector that smoothly resizes to match each word's width. Words cycle on a timer with an elastic ease, and the list DOM is recycled so the loop is infinite.