Jump to content
Search Community

Reverse timeline in different order

yannick test
Moderator Tag

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

var tlChangeMenuButton = new TimelineMax({ paused: true, onComplete: onComplete, onReverseComplete: onComplete });
tlChangeMenuButton
   .to(me.$subLetters, 2, { autoAlpha: 0, y: "-20%", scale: .4, transformOrigin: "50% 0%", ease: Power3.easeInOut }, "scene1")
   .to(me.$mainLetter, .4, { fill: colors.dark, stroke: colors.dark, ease: Power3.easeInOut }, "scene1" )
   .to(me.$subLetterSvg, 0, { display: "none" })

Hi, I have this setup and I'm trying to get $mainLetter and $subLetters to get started at the same time either way.

If I set a label like "scene1" it works as expected on the forward animation but if the animation is triggered by tl.reverse() it'll play $subLetters first and wait for it to finish before $mainLetters is played.

 

Does anyone have a suggestion how to animate the two elements always at the same time no matter which way?

 

Link to comment
Share on other sites

This is because of the durations staggering the "complete" times of the respective tweens. They all start at 0 ... but end at various times. So a reverse of the timeline will respect when the tweens ended with respect to each other. Essentially, the tweens are left justified in a timeline (all start at the same point) ... what I believe you are asking is, on reverse, to right justify them in the timeline (all end at the same point) which would mean adjust their position properties to be the total timeline duration minus the tween duration.

 

See the Pen vvdxBQ by sgorneau (@sgorneau) on CodePen

 

 

Instead of a reverse ... I think you may be looking for a new set of tweens.

 

 

  • Like 2
Link to comment
Share on other sites

Hi Shaun,

thanks for your answer.

What you describe is exactly what I mean.

 

How do right justify the tweens on reverse()? If I add .progress(1) to the reverse function it's still waiting for the first animation.

 

 

 

 

Link to comment
Share on other sites

@yannick,

 

I think rather than thinking of it as reverse (which is actually doing exactly what it should do ... reversing the playback with respect to tween timings as the playhead came to the end), you should consider a separate timeline to "start at 0" from the other direction. Here is a code pen illustrating both reverse() and a "pseudo" reverse (i.e. explicit tweens in the other direction). I've hardcoded some values for simplicity's sake (i.e. no value arrays or expressions to calculate element placements ... which I'm sure in a real world scenario would be likely). I also used  set() vs fromTo() just to be more explicit.

 

See the Pen ebVWZP by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

  • Like 2
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...