louise000 Posted July 3, 2022 Share Posted July 3, 2022 Hello, I'm trying to create the sketch shown in the demo with a very simple timeline that is activated on a button click and then reverses. The reverse command does nothing as far as I can see. I tried to do the same thing here without any buttons, but reverse also does not work here See the Pen GRxJXPW by louise-temple (@louise-temple) on CodePen What am I missing? See the Pen VwXLGxv by louise-temple (@louise-temple) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted July 3, 2022 Solution Share Posted July 3, 2022 You've created a timeline, but the problem is you're not using it. Your timeline is called `myAnim`, but you keep calling `gsap.to()`. You should be calling `myTL.to()`. The problem with your case is that there are new img created on each click, so you need to get these new img each time. This example creates a timeline each time the function runs. See the Pen NWYqEyG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Here is one that doesn't use a timeline and will animate all the just with a gsap.to() tween See the Pen MWVwzQp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen For good measure here is the first pen using the timeline you've created See the Pen mdxJQGZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
louise000 Posted July 3, 2022 Author Share Posted July 3, 2022 Thank you! Ach I can't believe I didn't notice that I was writing the tween to gsap instead of my variable. There is a related problem though, why can I not get it to play first and then reverse? See the Pen VwXLGxv?editors=1010 by louise-temple (@louise-temple) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted July 3, 2022 Share Posted July 3, 2022 In the slideDown function:myAnim.play().then(() => myAnim.reverse(0)); 1 Link to comment Share on other sites More sharing options...
louise000 Posted July 3, 2022 Author Share Posted July 3, 2022 Thank you! I guess when I read the documentation for the timeline .reverse method, when it said //reverses playback from the very END of the animation: tl.reverse(0); I thought it would trigger the reverse at the end of the play just by passing "0". //// I'll just leave this code snippet here for any other newbies who are still figuring out arrow functions. function slideDown(){ let myAnim = gsap.timeline() let balloon = document.querySelectorAll("img") myAnim.to(balloon, {y:200, stagger:0.2}); myAnim.play().then(myReverse); function myReverse(){ myAnim.reverse(0); } } Link to comment Share on other sites More sharing options...
GreenSock Posted July 3, 2022 Share Posted July 3, 2022 Are you aware that you can just set repeat: 1, yoyo: true if you want it to play forward once and then backwards to the beginning? And since you're only doing one tween, you don't even need a timeline at all - you can greatly simplify your code to: function slideDown(){ gsap.to("img", {y:200, stagger:0.2, repeat: 1, yoyo: true}); } Does that help? Link to comment Share on other sites More sharing options...
louise000 Posted July 4, 2022 Author Share Posted July 4, 2022 Thank you! I think this will help someone! In my case, this time, I am setting up this specific structure so that I can populate it with more complex timelines but I always really appreciate to see the brevity of thinking of more senior developers, thank you! Link to comment Share on other sites More sharing options...
GreenSock Posted July 4, 2022 Share Posted July 4, 2022 7 minutes ago, louise000 said: I am setting up this specific structure so that I can populate it with more complex timelines That's no problem: let tl = gsap.timeline({ repeat: 1, yoyo: true }); tl.to("img", {y:200, stagger:0.2}) .to(...) .to(...) Have fun! 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