ysk Posted January 13 Share Posted January 13 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 Link to comment Share on other sites More sharing options...
Solution PointC Posted January 13 Solution Share Posted January 13 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. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted January 13 Share Posted January 13 Yep. And also, you might want to check out the new useGSAP() hook that'll help clean up some of your code. 👍 1 Link to comment Share on other sites More sharing options...
ysk Posted January 14 Author Share Posted January 14 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now