Text Animations

Text animations using the GSAP SplitText plugin. These presets allow you to create stunning text animations by splitting text into words, characters, or lines. Each preset can be customized by passing additional GSAP variables or modifying values in the preset itself.

Important: Make sure you have imported and registered the SplitText plugin in your gsapConfig.ts file (see Getting Started).

splitWords

Animates text by splitting it into words. Each word animates with a stagger effect.

Preset

splitWords: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
  autoAlpha: 0,
  y: 20,
  duration: 0.6,
  ease: "power2.out",
  ...vars,
});

Usage Example

import { useRef } from "react";
import { useGSAP, gsap, SplitText } from "@/animations/gsapConfig";
import { textMotion } from "@/animations/text-presets";

export default function Component() {
    const ref = useRef<HTMLHeadingElement>(null);

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

        const split = new SplitText(ref.current, { type: "words" });
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });

        tl.from(split.words, textMotion.splitWords({ stagger: 0.1 }));

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

    return (
        <h1 ref={ref}>Your text here</h1>
    )
}

Note: Always call split.revert() in the cleanup function to restore the original DOM structure when the component unmounts.

Animate text by splitting words

splitChars

Animates text by splitting it into individual characters. Each character animates with a stagger effect.

Preset

splitChars: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
  autoAlpha: 0,
  y: 30,
  duration: 0.4,
  ease: "power2.out",
  ...vars,
});

Usage Example

import { useRef } from "react";
import { useGSAP, gsap, SplitText } from "@/animations/gsapConfig";
import { textMotion } from "@/animations/text-presets";

export default function Component() {
    const ref = useRef<HTMLHeadingElement>(null);

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

        const split = new SplitText(ref.current, { type: "chars" });
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });

        tl.from(split.chars, textMotion.splitChars({ stagger: 0.05 }));

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

    return (
        <h1 ref={ref}>Your text here</h1>
    )
}

Animate text by splitting characters

splitLines

Animates text by splitting it into lines. Each line animates with a stagger effect. Perfect for multi-line headings.

Preset

splitLines: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
  autoAlpha: 0,
  y: 40,
  duration: 0.8,
  ease: "power2.out",
  ...vars,
});

Usage Example

import { useRef } from "react";
import { useGSAP, gsap, SplitText } from "@/animations/gsapConfig";
import { textMotion } from "@/animations/text-presets";

export default function Component() {
    const ref = useRef<HTMLHeadingElement>(null);

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

        const split = new SplitText(ref.current, { type: "lines" });
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });

        tl.from(split.lines, textMotion.splitLines({ stagger: 0.2 }));

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

    return (
        <h1 ref={ref}>Your multi-line text here</h1>
    )
}

Animate text by splitting lines
Animate text by splitting lines

splitCharsRotate

Animates text by splitting it into characters with a 3D rotation effect. Each character rotates on the X-axis.

Preset

splitCharsRotate: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
  autoAlpha: 0,
  rotationX: -90,
  duration: 0.5,
  ease: "power2.out",
  ...vars,
});

Usage Example

import { useRef } from "react";
import { useGSAP, gsap, SplitText } from "@/animations/gsapConfig";
import { textMotion } from "@/animations/text-presets";

export default function Component() {
    const ref = useRef<HTMLHeadingElement>(null);

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

        const split = new SplitText(ref.current, { type: "chars" });
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });

        tl.from(split.chars, textMotion.splitCharsRotate({ stagger: 0.05 }));

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

    return (
        <h1 ref={ref}>Your text here</h1>
    )
}

Animate characters with rotation

splitWordsScale

Animates text by splitting it into words with a scale effect. Each word scales from smaller to normal size with a bounce effect.

Preset

splitWordsScale: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
  autoAlpha: 0,
  scale: 0.8,
  duration: 0.6,
  ease: "back.out(1.7)",
  ...vars,
});

Usage Example

import { useRef } from "react";
import { useGSAP, gsap, SplitText } from "@/animations/gsapConfig";
import { textMotion } from "@/animations/text-presets";

export default function Component() {
    const ref = useRef<HTMLHeadingElement>(null);

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

        const split = new SplitText(ref.current, { type: "words" });
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });

        tl.from(split.words, textMotion.splitWordsScale({ stagger: 0.1 }));

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

    return (
        <h1 ref={ref}>Your text here</h1>
    )
}

Animate words with scale effect

Complete Text Presets File

Here's a complete example of all text animation presets:

export const textMotion = {
  splitWords: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    y: 20,
    duration: 0.6,
    ease: "power2.out",
    ...vars,
  }),

  splitChars: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    y: 30,
    duration: 0.4,
    ease: "power2.out",
    ...vars,
  }),

  splitLines: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    y: 40,
    duration: 0.8,
    ease: "power2.out",
    ...vars,
  }),

  splitCharsRotate: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    rotationX: -90,
    duration: 0.5,
    ease: "power2.out",
    ...vars,
  }),

  splitWordsScale: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    scale: 0.8,
    duration: 0.6,
    ease: "back.out(1.7)",
    ...vars,
  }),
};

Important Notes

1. SplitText Cleanup: Always call split.revert() in the cleanup function returned from useGSAP to restore the original DOM structure. This prevents memory leaks and DOM issues.

2. SplitText Types:

   • { type: "words" } - Splits text into words
   • { type: "chars" } - Splits text into individual characters
   • { type: "lines" } - Splits text into lines

3. Stagger Values:

   • Words typically use stagger: 0.1
   • Characters typically use stagger: 0.05
   • Lines typically use stagger: 0.2

4. 3D Transforms: For splitCharsRotate, make sure your element has transform-style: preserve-3d in CSS if you want the full 3D effect.

Customization

All presets accept additional GSAP variables:

// Custom duration and stagger
tl.from(
  split.words,
  textMotion.splitWords({
    stagger: 0.15,
    duration: 0.8,
  }),
);

// Add delay
tl.from(
  split.chars,
  textMotion.splitChars({
    stagger: 0.05,
    delay: 0.2,
  }),
);