fernandofas Posted March 30, 2021 Share Posted March 30, 2021 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: 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") .reverse(); }; Link to comment Share on other sites More sharing options...
Rodrigo Posted March 30, 2021 Share Posted March 30, 2021 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!!! 3 Link to comment Share on other sites More sharing options...
fernandofas Posted March 30, 2021 Author Share Posted March 30, 2021 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 More sharing options...
PointC Posted March 30, 2021 Share Posted March 30, 2021 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. 3 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