Rolixy Instruction Guide

1. Open Site Settings → Custom Code →  before </body> tag.
2. Paste the code bellow:

<script>
 // Title Text Fade In Animation
gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll(".section-title, .page-title, .animation-text").forEach(title => {
  const delay = parseFloat(title.getAttribute("data-delay")) || 0;

  const letters = title.textContent.split("");

  // Wrap letters
  title.innerHTML = letters.map(l => `<span class="letter">${l}</span>`).join("");

  // GSAP Fade In Animation
  gsap.fromTo(
    title.querySelectorAll(".letter"),
    {
      opacity: 0,
      y: 10,        // slight upward movement (optional)
    },
    {
      opacity: 1,
      y: 0,
      duration: 0.6,
      ease: "power2.out",
      stagger: 0.03,
      delay: delay,
      scrollTrigger: {
        trigger: title,
        start: "top 80%",
        toggleActions: "play none none none",
      },
    }
  );
});

  
</script>

1. Select any heading or text block that you want to animate.
2. Add the class name: "animation-text" to enable the animation.

You can adjust duration, stagger, or start values to change timing or trigger point of the GSAP text animation from the JavaScript Code.