You can apply a GSAP-powered text reveal animation to any text element in this template.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:

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:
  

## ✅ GSAP + Lenis Animation Code Overview

This code enables **smooth scrolling**, **text animations**, **button flair hover effects**, and **menu link animations** using **Lenis** and **GSAP + SplitText**.

---

### 🚀 1. Smooth Scrolling with Lenis

**Script Source:**
```html
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>
```

**What it does:**
- Enables smooth scrolling across the entire site (excluding Webflow Designer/Editor).
- Includes methods to start/stop scrolling manually using Webflow attributes.

**Manual Controls (via Webflow attributes):**
- `data-lenis-start` – Start scrolling
- `data-lenis-stop` – Stop scrolling
- `data-lenis-toggle` – Toggle scroll on/off

---

### 🎯 2. Button Flair Animation (`data-block="button"`)

**How it works:**
- Adds a "flair" (hover ripple effect) to any button.
- Flair follows mouse position and scales in/out on hover.

**Setup:**
- Add the attribute `data-block="button"` to your button wrapper.
- Ensure it contains an element with the class `.button-flair`.

---

### ✨ 3. Menu Link Hover Animation (`menu` attribute)

**How it works:**
- When you hover over a menu item, each letter slides up with a staggered animation.

**Setup:**
- Add the attribute `menu` to any text element (like nav links).
- Internally uses GSAP + SplitText to animate each character.

---

### 🪄 4. Text Scroll Animations

**Targets elements with:**
- `data-animation="chars"` → Animates characters
- `data-animation="lines"` → Animates lines

**Customizable via these optional attributes:**

| Attribute                  | Description                             |
|---------------------------|-----------------------------------------|
| `data-animation-start`    | ScrollTrigger start position (e.g. `top 80%`) |
| `data-animation-end`      | ScrollTrigger end position              |
| `data-animation-actions`  | GSAP toggleActions (e.g. `play none none none`) |
| `data-animation-y`        | Y-axis offset (e.g. `2em`)              |
| `data-animation-x`        | X-axis offset                           |
| `data-animation-delay`    | Delay before animation starts           |
| `data-animation-duration` | Duration of the animation               |
| `data-animation-stagger`  | Delay between each word/letter/line     |
| `data-animation-ease`     | Easing type using CustomEase            |

**Example Usage in HTML:**
```html
<h2 data-animation="chars" data-animation-y="2em">Animated Heading</h2>
<p data-animation="lines">Animated paragraph text line by line.</p>
```

---

### 🔁 5. Responsive Split Re-initialization

On **window resize**, SplitText is reset and re-applied so the layout remains correct on different screen sizes.

---

### 📦 Dependencies Required

Be sure the following are loaded in your project:
```html
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.x/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.x/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
```

---

### ✅ Summary Table

| Feature              | How to Enable                       |
|---------------------|-------------------------------------|
| Smooth Scroll       | Included automatically (Lenis)      |
| Start/Stop Scroll   | `data-lenis-start`, `data-lenis-stop`, `data-lenis-toggle` |
| Button Flair Effect | `data-block="button"`               |
| Menu Letter Hover   | Add `menu` attribute                |
| Text Reveal on Scroll | `data-animation="chars"` or `"lines"` |