specific span Animate specific spans on hover

[riann]

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!

See the Pen WNWeQMG by we-fw-riann (@we-fw-riann) on CodePen

Edited February 27 by riann
added "hover event" tag for better accessibility

[mvaneijgen]

Hi @riann welcome to the forum!

 

I'm not completely sure what it is you want to your animation to do, but I have the feeling this is a scoping issue in Javascript. 

 

I've uncommented some of your code and just focused on the mouse enter animation. The .tagline element is used for the forEach and this is also what gets hovered and animated, so now when you hover over letters they will animate in one by one. I've set a border around the .para element, because I couldn't find it while debugging 🤣 

 

This is probably not what you want, but it shows you if you want to hover over each element you have to create an addEventListener for each of those elements. Hope it helps and happy tweening! 

 

See the Pen gOyYrpv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

The main issue is this:

let animateThis = para.querySelector(".tagline");

The querySelector method returns just the first element with that particular query it finds. You should use querySelectorAll or even better gsap.utils.toArray():

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://gsap.com/docs/v3/GSAP/UtilityMethods/toArray()

 

I created a simple demo that randomizes some of the span elements in your string and then animates them using stagger:

See the Pen vYMBGXW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[riann]

2 hours ago, Rodrigo said:

Hi,

 

The main issue is this:

let animateThis = para.querySelector(".tagline");

The querySelector method returns just the first element with that particular query it finds. You should use querySelectorAll or even better gsap.utils.toArray():

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://gsap.com/docs/v3/GSAP/UtilityMethods/toArray()

 

I created a simple demo that randomizes some of the span elements in your string and then animates them using stagger:

 

 

 

Hopefully this helps.

Happy Tweening!

 

2 hours ago, mvaneijgen said:

Hi @riann welcome to the forum!

 

I'm not completely sure what it is you want to your animation to do, but I have the feeling this is a scoping issue in Javascript. 

 

I've uncommented some of your code and just focused on the mouse enter animation. The .tagline element is used for the forEach and this is also what gets hovered and animated, so now when you hover over letters they will animate in one by one. I've set a border around the .para element, because I couldn't find it while debugging 🤣 

 

This is probably not what you want, but it shows you if you want to hover over each element you have to create an addEventListener for each of those elements. Hope it helps and happy tweening! 

 

 

 

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();
      });
    });