Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
karpec

reverse timeline in another timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, guys.

I needed to create animation like this (in principle):

1. animate rectangle in few steps (=in timeline)
2. when finished, run animation BACKWARDS - 2x faster.

But this part is only small part of complex timeline.

 

I tried to achieve this effect by .reverse() method - in two ways:

 

1) First, I put .add(t2) followed by .add(t2.reverse()) into one timeline.
I found out that .add(t2.reverse()) overwrite previous .add(t2) - if I understand this behavior well.
However I didn't get what I wanted. This example is represented by blue square in CodePen.

 

 

2) So I tried another way - I used onComplete parameter where I called this.reverse().
I didn't expect to get the result that I got. When onComplete is called, red square jumps to initial state without any animation.
I'm little bit confused because when I use only one timeline - without calling timeline in timeline as in example - everything works well.

 

Can anybody please tell me what I did wrong and show me better approach?

Thank you very much in advance.

Karpec

 

See the Pen qBBdpor by karpetr (@karpetr) on CodePen

  • Like 1
Link to post
Share on other sites

Hey karpec, thanks for being a Business Green member! We couldn't do what we do without people like you. 

 

Let's break down your first approach:

 

.add(t2)
.add( // This is ran THIRD - adds the reversed, timeScaled timeline to the master timeline
  t2.reverse()   // This is ran first - reverses the timeline
  .timeScale(2)  // This is ran second - changes the timeScale to make the timeline shorter
)

// BUT since reverse() and timeScale() affect the timeline itself, it also affected the 
// t2 in the previous .add() statement! So adding it twice in a row is practically the same
// as just adding it once.

For this approach to work, you would need to duplicate the timeline so that there are two instances. That way you can add them to the main timeline one after the other (with the second one being reversed and time scaled).

 

Your second approach is more correct. However, it's still a bit off because of how you're adding the timeline to another (main) timeline. If you remove (or comment out) the main timeline bit, you can see that it works like you'd expect. 

 

The reason for this is because you're essentially saying "Main timeline, right once you finish, do more stuff". The main timeline doesn't know what it should do.

 

If you really need to add it to a main timeline (like if you're chaining it with other animations that you didn't show here) I would just use more .to() calls like so:

 

See the Pen dyyogKQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

 

P.S. In GSAP 3 which you have private beta access to as a Business Green member there is a feature called "keyframes" that make this sort of sequential .to() on the same element easier :) You should check it out.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Thank you very much, Zach ? I appreciate your help.

Link to post
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.

×