Club4 demos

SplitText

Split text for granular animation control

Split text into characters, words, or lines for individual animation. Essential for kinetic typography and text reveals.

Split by characters
Split by words
Split by lines
Preserve spacing
Nested element support
Revert capability

Character Animation

Animate each character individually with stagger effects

Beginner

Character by character

CharAnimation.tsx

'use client';

import { useRef } from 'react';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

export function CharAnimation() {
  const textRef = useRef<HTMLHeadingElement>(null);

  useGSAP(() => {
    if (!textRef.current) return;

    const split = new SplitText(textRef.current, { type: 'chars' });

    gsap.from(split.chars, {
      opacity: 0,
      y: 20,
      rotateX: -90,
      stagger: 0.02,
      duration: 0.5,
      ease: 'back.out',
    });

    return () => split.revert();
  }, { scope: textRef });

  return (
    <h2 ref={textRef} className="text-4xl font-bold">
      Character by character
    </h2>
  );
}

Word Animation

Stagger animations across words for readable reveals

Beginner

Each word animates in sequence creating a flowing reveal effect that guides the eye naturally.

WordAnimation.tsx

'use client';

import { useRef } from 'react';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

export function WordAnimation() {
  const textRef = useRef<HTMLParagraphElement>(null);

  useGSAP(() => {
    if (!textRef.current) return;

    const split = new SplitText(textRef.current, { type: 'words' });

    gsap.from(split.words, {
      opacity: 0,
      y: 30,
      stagger: 0.05,
      duration: 0.6,
      ease: 'power2.out',
    });

    return () => split.revert();
  }, { scope: textRef });

  return (
    <p ref={textRef} className="text-xl">
      Each word animates in sequence creating a flowing reveal effect.
    </p>
  );
}

Line Animation

Reveal text line by line with custom easing

Intermediate

First line slides up into view.

Second line follows with a slight delay.

Creating a cascading reveal effect.

LineAnimation.tsx

'use client';

import { useRef } from 'react';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

export function LineAnimation() {
  const textRef = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    if (!textRef.current) return;

    const split = new SplitText(textRef.current, { type: 'lines' });

    gsap.from(split.lines, {
      opacity: 0,
      y: 50,
      clipPath: 'inset(100% 0 0 0)',
      stagger: 0.15,
      duration: 0.8,
      ease: 'power3.out',
    });

    return () => split.revert();
  }, { scope: textRef });

  return (
    <div ref={textRef} className="text-lg leading-relaxed">
      <p>First line slides up into view.</p>
      <p>Second line follows with a slight delay.</p>
      <p>Creating a cascading reveal effect.</p>
    </div>
  );
}