Instructions page

GSAP Animation Instructions

This guide explains how to modify the GSAP + ScrollTrigger + SplitText animations on your website.

How to Enable and Configure:

Select the text element in the Navigator panel.
Open the Settings tab in the right-hand panel.
Add the following custom attributes:

1. Basic Setup

The animations are initialized on elements that have a data-animate attribute:

<h2 data-animate="chars">Your Animated Heading</h2>
<p data-animate="lines">This paragraph will animate line by line.</p>

data-animate="chars" → Animates individual characters.
data-animate="lines" → Animates entire lines of text.

2. Customizing Scroll Trigger

Each element can define when the animation starts and ends using data attributes:

<h2 data-animate="chars" data-start="top 90%" data-end="bottom top" data-actions="play none none none">
  Animated Text
</h2>

data-start → The scroll position where animation begins (default: "top 80%").
data-end → The scroll position where animation ends (default: "bottom top").
data-actions → ScrollTrigger actions (default: "play none none none").
Options: play, pause, resume, reset, restart, complete, reverse, none.

3. Modifying Animation Properties

You can change how the animation behaves by using these data attributes:

<p data-animate="lines" data-y="30" data-opacity="0" data-duration="2" data-stagger="0.15">
  Smooth GSAP animation
</p>

4. Reset Animations

The script automatically resets SplitText on window resize to ensure animations work properly on different screen sizes.

window.addEventListener("resize", () => {
  initTextAnimations();
});

If you want to manually reset, call initTextAnimations().

5. Smooth Scroll (Lenis) Integration

The page uses Lenis for smooth scrolling. You can control scroll behavior:

let lenis = new Lenis({ lerp: 0.1, wheelMultiplier: 0.7 });

$("[data-lenis-start]").on("click", () => lenis.start());
$("[data-lenis-stop]").on("click", () => lenis.stop());
$("[data-lenis-toggle]").on("click", function () {
  $(this).toggleClass("stop-scroll");
  if ($(this).hasClass("stop-scroll")) lenis.stop();
  else lenis.start();
});

[data-lenis-start] → Start smooth scrolling
[data-lenis-stop] → Stop smooth scrolling
[data-lenis-toggle] → Toggle smooth scrolling

6. Tips

<h2 data-animate="chars">Your Animated Heading</h2>
<p data-animate="lines">This paragraph will animate line by line.</p>

Use data-animate="chars" for headings or small text for a per-letter animation.
Use data-animate="lines" for paragraphs or longer text.
Adjust data-stagger for faster or slower staggered effects.
Combine data-y, data-x, data-opacity, and data-scale for creative effects.

Your Cart