Jump to content
GreenSock

fernandofas

Reverse timeline

Recommended Posts

Hi guys,

 

I know this topic have been around for a while, but I can't make the timeline to reverse just adding .reverse() at the end of it.

Any help will be great.

 

Thank you,

Fernando

,this.timeline = gsap.timeline()
    .to([this.f1back,this.logo], {duration: 1xPercent: -100z: 0.1rotationZ: 0.01force3D:truetransformPerspective: 1000ease: 'none' }, "+=4")
    .from([this.f2backthis.f2copy1this.f2copy2this.ctabackthis.ctacopythis.f2logo], {duration: 1xPercent: 100z: 0.1rotationZ: 0.01force3D:truetransformPerspective: 1000ease: 'none' }, "-=1")
    .reverse();
};
Link to comment
Share on other sites

Hi Fernando,

 

The thing is that your timeline is actually reversing by the time the reverse() method is called. The process is roughly as follow:

  • You create the Timeline instance: gsap.timeline() at this point your timeline is active and moving forward as expected.
  • Then you add your timeline instances using .to() and .from(), your timeline is still active and moving forward.
  • Finally you add a .reverse() method, at this point GSAP says, OK this instance should now going back and not forward. If you check your timeline you'll see that is both active and it's reversed status is true.

The issue is that the time elapsed since you create the instance and the code reaches the .reverse() method is just a few milliseconds. If I had to guess I would say no more than 15 ms, that's virtually nothing and sure enough, there is no visible indication that your timeline ever when forward at all. So what you're seeing is completely expected and normal behaviour.

 

If you want your timeline to play from the end and then backwards, you could add a .progress(1) and then the .reverse() method:

this.timeline = gsap.timeline()
  .to([this.f1back,this.logo], {duration: 1, xPercent: -100, z: 0.1, rotationZ: 0.01, force3D:true, transformPerspective: 1000, ease: 'none' }, "+=4")
  .from([this.f2back, this.f2copy1, this.f2copy2, this.ctaback, this.ctacopy, this.f2logo], {duration: 1, xPercent: 100, z: 0.1, rotationZ: 0.01, force3D:true, transformPerspective: 1000, ease: 'none' }, "-=1")
  .progress(1)
  .reverse();

Also in the code you posted there is a comma before the timeline instantiation, you might want to check that as well.

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Hi Rodrigo,

 

Thank you for your input.

 

The comma is not on the original code, it was a mistype when placing in the post. Sorry about that.

Unfortunately, placing .progress(1) and .reverse(); didn't work.

Not sure why, but I will create a codepen file and will place the link here asap.

 

Thank you

Link to comment
Share on other sites

You can also reverse from the end like:

//reverses playback from the end of the animation:
tl.reverse(0);

But a demo would be helpful.

 

Happy tweening.

:)

 

  • Like 3
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.
×