2 Javascript Split Animations

by Vladimir 1 min read

This collection is your guide to creating expressive “split” animations, from text to images. Examples demonstrate how JavaScript programmatically breaks elements into parts (characters, words, or grid cells), which are then animated using GSAP and its stagger function. For maximum performance, all animations use GPU-accelerated transform and opacity, and the Intersection Observer API triggers them only upon entering the viewport. This is a comprehensive toolkit for building cinematic and smooth reveal effects.

Examples

Parallax slide layout featuring expanding variable fonts, split background wipes, and offset floating image layers animated via GSAP.

Interactive Variable Font GSAP Slideshow

This masterfully choreographed full-page slider captures wheel, swipe, and key events to drive a multi-layered transition. Utilizing GSAP Observer, the layout animates parent and child containers in opposite directions, producing a clean split-wipe reveal. Simultaneously, a custom variable font dynamically stretches its width axis (wdth) alongside parallax image transformations to create an organic, tactile sense of momentum. (Requires: gsap, gsap-observer)

Technologies:
HTML CSS/SCSS JavaScript
Difficulty: Advanced
Browser Support (as of Jul 2026):
Chrome Chrome 79+ Edge Edge 79+ Firefox Firefox 68+ Safari Safari 13+
Features:
GSAP Observer Scroll Variable Font Stretching Split Parallax Transitions
Code by: Cassie Evans Cassie Evans
License: MIT
Slider #2

Slider #2

An immersive, cinematic slider that feels like a high-budget interactive installation, thanks to its complex animations, custom cursor, and comprehensive input support.

See the Pen Slider #2.