API
Presets
Text Clip Reveal

Text clip reveal

The createTextClipReveal() preset is designed for revealing text in a creative way. It's perfect for titles, headers, or any text that you want to stand out.

💡

This effect implements the SplitText plugin, which requires a GSAP club membership.

Usage

Our library provides you with a set of sensible defaults, while also offering the flexibility to further customize using a variety of available parameters.

import SplitText from "gsap/SplitText";
 
createTextClipReveal(".reveal", {
  SplitText,
  fromVars: {
    opacity: 0,
  },
  toVars: {
    opacity: 1,
    duration: 2,
    ease: "expo.inOut",
  },
});

Reference

createTextClipReveal(target, textClipRevealParams, motionParams);

Parameters

target (opens in a new tab)

The target elements to apply the text clip reveal effect to. Can be a single target, or an array of targets.

This argument adheres to the ValueOrGetter type.

textClipRevealParams (opens in a new tab)

Optional parameters for the text clip reveal effect, including the SplitText GSAP plugin, split variables for child and parent elements, and tween variables for the from and to states of the animation.

This argument adheres to the ValueOrGetter type.

motionParams (opens in a new tab)

Optional parameters for the motion effect, including triggers and behavior settings.

This argument adheres to the ValueOrGetter type.

Returns

A destroy function to manually stop and clean up the text clip reveal effect.

Parallax