Hover event that triggers different animation on target and the rest of the elements.

[ysk]

Hello

 

I have a list of links and wanted to create a hover effect that animates all elements in some way (ie reduce opacity) but do something different on the hovered element (ie animate a contained span). I have created a pen with a React functional component that uses gsap.

In essence I am doing the following:

- Create 2 lists of elements (hovered element, non hovered elements)

- Create 2 gsap timelines 

- Trigger those timelines on mouseover and on mouseleave.

 

I have 1 problem and 1 question.

Question: am I using best practices? I have wrapped the code inside a gsap context and I'm reverting the context when the component lifecycle ends.

However I have 2 eventlisteners that I am not sure if thery are removed when lifecycle of component ends.

 

Problem: animation only happens once for each element. How can i persist the timeline effects?

 

Any help and suggestions would be greatly appreciated.

 

Thank you

See the Pen mdoOLjZ by 44db (@44db) on CodePen

[PointC]

The play once problem is because the timelines have already played. You can solve that with:

element.addEventListener("mouseover", () => tl1.play(0));
element.addEventListener("mouseleave", () => tl2.play(0));

Many times, you can hover an item and simply reverse the timeline when you mouseleave. Like this.

See the Pen rNqbOxm by PointC (@PointC) on CodePen

 

You can also just use tweens and target the entire array except for the one you hover. Something like this:

See the Pen YzgpJJq by PointC (@PointC) on CodePen

 

Hopefully that helps. Anything  React specific will have to wait for someone else as I have no React knowledge.

 

[GreenSock]

Yep. And also, you might want to check out the new useGSAP() hook that'll help clean up some of your code. 👍

[ysk]

Thank you so much @PointC & @GreenSock,

 

Although I consider both replies as the "Marked Solution" I will mark the first one as it solves the issue with the play once.

Regarding useGSAP, that is a great helper indeed and the documented examples really help point out the scenarios that it tries to solve.

 

 

Thanks again for the prompt replies guys.

Yannis