10+ Splitting.js Examples

This elegant, magazine-style layout features overlapping typography and image blocks on a multi-column CSS grid. By integrating the Intersection Observer API with GSAP and Splitting.js, the component monitors viewport scroll. Once in view, each text line and image executes a staggered reveal transition, sliding up, fading in, and un-skewing smoothly. (Requires: gsap.js, splitting.js)

This Split Staggered Reveal Card creates a dramatic, cinematic effect suitable for portfolios or featured content sections. Upon interaction, the background image recedes while two semi-transparent overlays slide in to create a high-contrast backdrop. Simultaneously, the title and description animate in with a precise staggered delay - letters for the title and words for the paragraph - powered by CSS variables. (Requires: Splitting.js)

A playful typographic vignette where Splitting.js enables granular CSS control, while complex @keyframes orchestrate a physics-based liquid dot that physically interacts with specific letters via data-char attributes.

A highly interactive portfolio showcase powered by GSAP ScrollTrigger and Splitting.js. It features a custom fluid cursor, complex SVG text masking effects, and a seamless page transition system that loads external iframes into a 3D-transformed modal overlay upon interaction.

Explore a variety of sophisticated hover effects, where complex animation patterns are created using advanced CSS selectors like :nth-child(-n + 3). These selectors target specific ranges of “cells” generated by Splitting.js.

This demo is a showcase of Splitting.js, a library that splits HTML elements into granular parts for detailed animation. The “Course Clear” heading is split into individual characters, and a grid overlay is created with data-splitting="cells", allowing for complex, staggered animations on each part.

A complex UI animation in SCSS and JS, where the Splitting.js library splits text into characters for per-character transform: translateY animation - this is combined with SVG filters animated via requestAnimationFrame for a comprehensive visual effect.

Classic ‘scrollytelling’ with GSAP - creating the illusion of movement by animating transform: translateX on position: fixed elements based on the vertical scroll of an extra-long page.

A demonstration of per-character text manipulation using Splitting.js to create a striking CSS glitch animation, where each character receives a unique set of random custom properties for varied and dynamic text reveal effects.

A great example of GSAP choreography, where stagger and positioning ("-=0.4", "<") are used to create a complex chain of interactions between elements. It features dynamic text animation with the Splitting.js library and also allows for controlling the entire animation’s speed via JavaScript.

This demo shows how modern CSS can power rich interactions. It combines Splitting.js and advanced CSS Grid with dynamic custom properties to create a complex, performant, and responsive image hover effect.