Instructions page
How to start?
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"` |
