Instructions page

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:
  

Attribute	             Effect Description
[words-slide-up]	     Words slide upward with fade on scroll
[words-rotate-in]	     Words rotate in from top using 3D rotation
[words-slide-from-right]     Words slide in from right with fade
[letters-slide-up]	     Each letter slides up individually
[letters-slide-down]	     Each letter slides down individually
[letters-fade-in]	     Each letter fades in with staggered delay
[letters-fade-in-random]     Same as above, but with a random order
[scrub-each-word]            Each word fades in based on scroll position (scrubbing)

// Add a class name counter, then provide two attribute values: one for the counter number and one for the data suffix.

document.querySelectorAll(".counter").forEach((el) => {
    const target = parseInt(el.getAttribute("data-target")) || 0;
    const suffix = el.getAttribute("data-suffix") || "";
    const counter = { value: 0 };

✨ GSAP + SplitText Text Animation Guide

1. Add this JS to your project:
--------------------------------------------------
new SplitText("[text-split]", {
  type: "words,chars",
  wordsClass: "word",
  charsClass: "char"
});

function createScrollTrigger(triggerElement, timeline) {
  ScrollTrigger.create({
    trigger: triggerElement,
    start: "top bottom",
    onLeaveBack: () => {
      timeline.progress(0);
      timeline.pause();
    }
  });
  ScrollTrigger.create({
    trigger: triggerElement,
    start: "top 60%",
    onEnter: () => timeline.play()
  });
}
--------------------------------------------------

2. Use these attributes on your elements:
- [text-split] ➜ required for all
- [words-slide-up]
- [words-rotate-in]
- [words-slide-from-right]
- [letters-slide-up]
- [letters-slide-down]
- [letters-fade-in]
- [letters-fade-in-random]
- [scrub-each-word]

3. Example HTML:
<h2 text-split words-slide-up>This is animated text</h2>

📄 Image Trail Hover Effect – User Guide
----------------------------------------

This script creates a smooth, animated image trail that follows the cursor when hovering over a section. It also animates background images inside items.

✅ Requirements:
- GSAP (GreenSock Animation Platform)
- Proper HTML structure and CSS for `.sm_image-trail`, `.sm_image-item`, etc.

🔧 HTML Structure:
-----------------------------------------------------
<div class="sm_image-trail-section">        <!-- Wrapper -->
  <div class="sm_image-trail-container">   <!-- Items Wrapper -->
    <div class="sm_image-item"></div>      <!-- Animated BG item -->
    ...
  </div>
  <div class="sm_image-trail"></div>       <!-- Floating image trail -->
</div>
-----------------------------------------------------

💡 How It Works:
- `.sm_image-trail` fades in on hover and follows the cursor with dynamic skew and scale.
- `.sm_image-item` elements animate their background from top to bottom in a loop.

🧩 JavaScript Summary:
-----------------------------------------------------
1. On mouse enter/leave:
   - Fade in/out the `.sm_image-trail` using `autoAlpha`.

2. On mouse move:
   - Cursor position (`x`, `y`)
   - Dynamic `skewX`, `skewY`, `scaleX`, `scaleY` based on movement

3. Background items (`.sm_image-item`):
   - Animate `backgroundPosition` from top to bottom infinitely
-----------------------------------------------------

📌 Customization:
- Change `.sm_image-trail` style via CSS for a different trail image or effect.
- Add/remove `.sm_image-item` blocks to control the number of background animations.
- Adjust GSAP duration, ease, or background position values as needed.

🎯 Quick Tip:
Make sure `gsap` and `ScrollTrigger` are loaded before this script.

That’s it! You’re ready to create a beautiful hover-based image trail experience.