Jump to content
Search Community

reverse not working

louise000 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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

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

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

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!

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...