lauraddr Posted April 22, 2020 Share Posted April 22, 2020 Hi, I'm coming to you because I'm just starting to get into greensock and I can't figure out how to do a reverse of my animation. I'd like to run my animation in reverse to the click, and then do a page transition. I'm stuck on this notion of reverse. Can you help me please See the Pen vYNgEmP by 134Laura (@134Laura) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 22, 2020 Share Posted April 22, 2020 Hey Laura and welcome to the GreenSock forums! A few notes about your code: I cleaned up your markup and CSS to only what you need. I highly recommend using classes that are shared between elements to apply the same styles to different elements. You don't need to wait for the window's load event since the JS is added at the bottom of the <body>. You're using the old GSAP syntax - I recommend learning the GSAP 3 syntax that's sleeker. I'd use GSAP's defaults to save you some typing. To get the timeline to reverse on click, you need to add a click event listener on the element. Altogether you'll get something like this: See the Pen oNjBgVO?editors=0010 by GreenSock (@GreenSock) on CodePen I highly suggest going slowly through the GSAP getting started article: I also highly suggest my article on article on animating efficiently because I think you'll learn a lot not only about GSAP but how to set things up correctly in JavaScript. Happy tweening! 2 Link to comment Share on other sites More sharing options...
lauraddr Posted April 22, 2020 Author Share Posted April 22, 2020 Thank you very much for your help and advice, I'll look into it right away. Thank you again, you're on top, take care of yourself. 🥰 1 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