danosaur Posted June 26, 2022 Share Posted June 26, 2022 Hello dear GSAP community, I'm really bad at this, I was wondering if somebody knows how to proceed. I have two questions: How can I start the animation only on the currently hovered item? Why does the animation play when the page loads even thought it's set to paused? Appreciate any hint or advice! 🙏 See the Pen jOzNOJe by danielapro (@danielapro) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 26, 2022 Solution Share Posted June 26, 2022 Thanks for being a Club GreenSock member, @danosaur! You created one big repeating timeline in which you were scrambling the text for all the elements simultaneously and you were playing that timeline on mouseover. I think you meant to do something like this: See the Pen WNzevxv?editors=1010 by GreenSock (@GreenSock) on CodePen Notice I'm using mouseenter and mouseleave - be very careful about mouseover and mouseout because those fire on any child elements too (usually problematic). You only need to do one loop through those elements, and add the listeners in there. Does that clear things up? 2 Link to comment Share on other sites More sharing options...
danosaur Posted June 26, 2022 Author Share Posted June 26, 2022 Hi Jack, thanks so much! That's exactly what I was trying to achieve. Should've created the timeline inside that loop! Also thanks for explaining me mouseover/mouseout issue! Will be more careful in the future. Have a great Sunday! 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