GSAP Guide

🎬 Text Line Reveal Animation

— Step-by-Step Guide

This animation reveals each line of text with a smooth upward motion when it enters view.

✅ What It Does

1. Targets Elements
   It finds all elements with [animate-lines] attribute.
2. Splits Text Into Lines
   Uses SplitText to break the text into individual lines.
3. Wraps Each Line
   Each line is placed inside a wrapper (mask: "lines") to hide overflow.
4. Animates on Scroll
   As you scroll to the element, each line moves up (y: 155%), rotates slightly, and fades in.
5. Stagger Effect
   Lines appear one after another for a smooth wave effect.

🛠️ How to Customize

1. Change the Target
   • Add the attribute [animate-lines] to any text block you want to animate.
2. Adjust Scroll Triggerstart: "top center"

   • Change where the animation starts on scroll.
   • Example: "top 80%" to start earlier.
3. Control the Movementy: "155%"
rotateZ: 3

   • y controls how far lines move up.
   • rotateZ adds a slight tilt.
4. Change Animation Speedduration: 0.7
ease: "circ.out"

   • Lower duration = faster animation.
   • Try different ease types like "power2.out" for a snappier feel.
5. Adjust Staggerstagger: 0.1

   • Change how much delay between lines.
   • Lower = faster wave, higher = slower.

‍

‍

‍

<script>
document.querySelectorAll("[animate-lines]").forEach(el2 => {
  let split2 = SplitText.create(el2, {
    type: "lines",
    mask: "lines",
    linesClass: "line"
  });

  gsap.from(split2.lines, {
    y: "155%",
    autoSplit: true,
    opacity: 1,
    rotateZ: 3,
    duration: 0.7,
    ease: "circ.out",
    stagger: 0.1,
    scrollTrigger: {
      trigger: el2,
      start: "top center",
    }
  });
});
</script>