Juc1 Posted June 30, 2020 Share Posted June 30, 2020 Hi all Can anyone please correct my pen - I want to say "with the first mouseenter on any red box, play the timeline" (which reveals the green box) With the next mousenter on any red box, reverse the timeline With the next mousenter on any red box, play the timeline etc ie mouseenter event alternates between play and reverse the timeline Thanks... See the Pen oNbovWJ by Juc1 (@Juc1) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 Hey Juc1. If you look in the dev tools console (F12) you can see that there's an error with your code. The console is invaluable when figuring out what is going wrong in your code. I highly recommend that you use it regularly Here's how I'd set it up: See the Pen gOPXbyE?editors=0010 by GreenSock (@GreenSock) on CodePen Some notes: I write about this technique in more depth in my article on animating efficiently. I highly recommend that you give it a thorough read You don't need new before gsap.timeline(). It's better to use x rather than left for performance reasons. 1 Link to comment Share on other sites More sharing options...
Juc1 Posted June 30, 2020 Author Share Posted June 30, 2020 @Zach thanks a lot. I will read your article in depth thank you 😀 but for now your pen does "reverse the timeline on mouseleave" but in my question it was not reverse timeline on mouseleave but reverse timeline on next mouseenter = first mouseenter - play the timeline (mouseleave does nothing) second mouseenter - reverse the timeline (mouseleave does nothing) third mouseenter - play the timeline (mouseleave does nothing) fourth mouseenter - reverse the timeline (mouseleave does nothing) etc (ie alternating between one mouseenter and the next) Could you please adjust your example pen ? 😀 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 That doesn't make much sense in terms of usability... But it's a logic issue. You need to check the state in that case. See the Pen ZEQabjZ?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Juc1 Posted June 30, 2020 Author Share Posted June 30, 2020 15 minutes ago, ZachSaucier said: That doesn't make much sense in terms of usability... My pen is simplified in order to ask the question so hopefully it would make more sense with the background details. But anyway thanks a lot for your help 👍 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