🚀 GSAP + SplitText + ScrollTrigger User Guide

(How to Edit & Customize Your Animations)

This guide explains how to control and edit all animations used in your template.

1.Requirements (Important)

Before using anything, make sure:

• GSAP is added
• Plugins included:
  • ScrollTrigger
  • SplitText
  • Flip

👉 If animations don’t work, 90% of the time it's missing scripts.

2.Menu Indicator (Navigation Hover Effect)

🔧 How it works

• Moves .indicator inside hovered .menu-item
• Automatically detects current page

What you can edit

Change animation speed

duration: 0.4

Change easing

ease: "power1.out"

Disable current page detection

Remove this block:

let path = window.location.pathname...

Required Structure

<div class="menu">  <a class="menu-item" href="/">Home</a>  <a class="menu-item" href="/about">About</a>  <div class="indicator"></div></div>

What is this?

3. Blog Title Hover Underline

🔧 Class Required

.blog-title-line

✏️ Edit animation speed

duration: 0.4   // hover induration: 0.25  // hover out

✏️ Edit delay between lines

stagger: 0.15

4. Counter Animation

HTML Setup

<div class="counter" data-target="5000" data-suffix="+"></div>

What is this?

Editable Options

Change speed

duration: 2

Change trigger position

start: "top 80%"

5. Text Animation System (VERY IMPORTANT)

This is the core animation system using attributes.

Enable Text Animation

Add this attribute:

[text-split]

Animation Types

1. Words Slide Up

<div text-split words-slide-up>Text here</div>

2. Words Rotate

<div text-split words-rotate-in>Text here</div>

3. Words Slide From Right

<div text-split words-slide-from-right>Text here</div>

4. Letters Slide Up

<div text-split letters-slide-up>Text</div>

5. Letters Slide Down

<div text-split letters-slide-down>Text</div>

6. Letters Fade

<div text-split letters-fade-in>Text</div>

7. Random Fade

<div text-split letters-fade-in-random>Text</div>

Customize Animation

Speed

duration: 0.5

Delay between elements

stagger: { amount: 0.5 }

Movement

yPercent: 110   // up/downx: "1em"        // left/right

6. Scroll Trigger Settings

Control when animation starts

start: "top 60%"

Examples:

• "top 90%" → late trigger
• "top 50%" → earlier trigger

7. Scrub Animation (Scroll Controlled)

Usage

<div text-split scrub-each-word>Text</div>

✏️ Control smoothness

scrub: true

8. Button Hover Animation

Required Structure

<div data-block="button">  <div class="button-flair"></div>  Button Text</div>

Customize Speed

duration: 0.4

Customize scale

scale: 1   // hover inscale: 0   // hover out

9. Important Notes

Resize Fix

Text automatically re-splits on resize:

gsap.utils.debounce(init, 200);

👉 Do NOT remove this — it prevents broken layouts.

Font Loading Fix

document.fonts.ready

👉 Ensures animations run AFTER fonts load
👉 Prevents layout glitches