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! https://codepen.io/we-fw-riann/pen/gOyYawN // 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(); }); });

Hi, I'm currently making a personal website, and I was thinking I could implement a small animation to add to the details. The intended animation that I was trying to create was one that when the viewer of my website hovers overs certain <span> elements, those <span> elements would animate, without animating the other <span> elements. However, when I wrote my code, it didn't create the intended animation. Instead, it only animated the first <span> element regardless of whichever <span> elements that I hovered over. I have attached my CodePen demo URL as per the community guidelines, so if you want to take a look at my current code, it is readily available there. I would appreciate any inputs that I could get. Thank you!