Text Animation

---head code---

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script defer src="https://unpkg.com/split-type"></script>

<style>
/* Avoid Flash of Unstyled Content */
.is-selected, {
visibility: hidden;
}
</style>

-- before body code --

<script>
function init() {
 gsap.registerPlugin(ScrollTrigger);

 // Select static and animated elements
 const oneAnimated = document.querySelector("#one-animated");
 const oneStatic = document.querySelector("#one-static");
 const twoAnimated = document.querySelector("#two-animated");
 const twoStatic = document.querySelector("#two-static");
 const threeAnimated = document.querySelector("#three-animated");
 const threeStatic = document.querySelector("#three-static");

 // Split the text into words as spans
 const splitType = new SplitType("#words-to-split", { types: "words" });

 // Set positions
 matchLocation(oneStatic, oneAnimated);
 matchLocation(twoStatic, twoAnimated);
 matchLocation(threeStatic, threeAnimated);

 // Hide static elements, make animated elements visible
 // Avoids flashing of content
 gsap.set(oneAnimated, { visibility: "visible" });
 gsap.set(twoAnimated, { visibility: "visible" });
 gsap.set(threeAnimated, { visibility: "visible" });
 gsap.set(oneStatic, { visibility: "hidden" });
 gsap.set(twoStatic, { visibility: "hidden" });
 gsap.set(threeStatic, { visibility: "hidden" });

 let tl;

 function createTimeline() {
   let progress = tl ? tl.progress() : 0;
   if (tl) tl.kill();

   tl = gsap.timeline({
     scrollTrigger: {
       trigger: ".scroll-track",
       start: "10% top",
       end: "bottom bottom",
       scrub: 1
     }
   });

   tl.to(splitType.words, {
     opacity: 0,
     rotationZ: 0,
     rotationX: 0,
     yPercent: -5,
     xPercent: 0,
     scale: 0.8,
     stagger: 0.05
   })
   .to([oneAnimated, twoAnimated, threeAnimated], {
     x: 0,
     duration: 2
   })
   .to(
     [oneAnimated, twoAnimated, threeAnimated],
     { y: 0, ease: "power1.inOut", duration: 1 },
     ">-1"
   )
   // Fade in the .button element from 0 to 100% opacity
   .from(".button", {
     opacity: 0,
     duration: 1,
     ease: "power1.inOut",
   }, "<");

   tl.progress(progress);
 }

 createTimeline();

 function handleResize() {
   matchLocation(oneStatic, oneAnimated);
   matchLocation(twoStatic, twoAnimated);
   matchLocation(threeStatic, threeAnimated);

   createTimeline();
 }

 function matchLocation(staticElement, animatedEl) {
   let boundsRel = staticElement.getBoundingClientRect();
   let boundsAbs = animatedEl.getBoundingClientRect();

   gsap.set(animatedEl, {
     x: "+=" + (boundsRel.left - boundsAbs.left),
     y: "+=" + (boundsRel.top - boundsAbs.top)
   });
 }

 window.addEventListener("resize", handleResize);
}

window.addEventListener("load", init);
</script>

‍