riann

Nahh honestly thank you so much you lot. I figured it out now. I modified both of your codes to accomplish my goal. Unfortunately, I don't know how to post a CodePen link on the replies, so I'll just leave the link to it here along with the code so you guys can see my solution. Once again, thank you so much!
 

See the Pen gOyYawN by we-fw-riann (@we-fw-riann) on CodePen
 
// initial tagline animation let taglineAnimation = gsap.fromTo( ".tagline", { y: -10, opacity: 0, }, { y: 0, opacity: 1, stagger: 0.1, ease: "sine.out", paused: true, } ); gsap.utils.toArray(".tagline").forEach((span) => { // let animateThis = para.querySelector(".tagline"); let hoverAnimation = gsap.to(span as HTMLElement, { y: -10, duration: 1, paused: true, }); (span as HTMLElement).addEventListener("mouseenter", () => { hoverAnimation.timeScale(20).play(); }); (span as HTMLElement).addEventListener("mouseleave", () => { hoverAnimation.timeScale(1).reverse(); }); });