Animate, do other stuff, reverse

[Andross]

This seems to be a simple enough process, but I cannot find a way to do it.

 

I have three complex timelines which I have created, which I would like to play at discrete times on a 4th timeline. This is fine, I can use the .add() function to play them at the correct times.

However, I would like to reverse the first animation after the other animations have finished, or to be more precise, I would like to reverse the first animation after a set time, along the lines of this:

masterTimeline
	.add(timelineOne.play(), 0)
	.add(timelineTwo.play(), 3)
	.add(timelineThree.play(), 3.5)
	.call(timelineOne.reverse(), 9)

However, this does not seem to be possible. It will skip the initial playthrough of timelineOne and only show the reverse. I have also tried .add(timelineOne.play().delay(9).reverse(0) however this does not improve matters. At whits end, because I really don't want to have to create a new reverse version of timelineOne.

[ZachSaucier]

Hey Andross and welcome to the GreenSock forums!

 

The reason why your approach doesn't work is because .add(timelineOne.play(), 0) adds it as you expect but then .call(timelineOne.reverse(), 9) reverses it immediately because it's affecting the same object (timeline) and is immediately invoked, which means that it won't play forward the first time. You could work around this by duplicating the timeline and then reversing the duplicated version. But I would suggest the method below:

 

If you put the timelineOne.reverse() inside of another function that is called, then it won't be invoked immediately. Thus the first .add() will play normally as it should and the second one will be reversed. Example:

masterTimeline
  .add(timelineOne.play(), 0)
  .add(timelineTwo.play(), 3)
  .add(timelineThree.play(), 3.5)
  .call(() => timelineOne.reverse(), 9)

 

[Andross]

Thanks, Zach

I eventually solved the problem by creating another timeline at the call function, however this method of yours in cleaner.

That being said, I think it would be adventitious to have some kind of attribute which causes the timeline to behave in the way I was originally suggesting, as the current behaviour is not very intuitive.

Thanks again.

[ZachSaucier]

@Andross I would argue (and I think most people would agree) that the way you suggest is actually the untintuitive way when you are understanding what's happening. It's like you're trying to tell the same timeline to do to different things at the same time. 

[Andross]

Well I cannot think of any scenario where you would want to assign a property and then immediately override it with a different property, which is basically what we are saying here. I understand that you're saying from an 'under the hood' point of view, it is not aware of the previous states in the timeline, but to me, it makes sense that the timeline is aware of earlier calls on the same object.

 

Generally, if someone is going to call the same timeline object multiple times within a timeline, I would say that it's a reasonable assumption that they would want what happens earlier in the timeline to affect what happens later, rather than whatever is last just overwriting everything.

 

But I could be wrong, I frequently wish to do stuff which no one else seems to want to do.

[Andross]

13 hours ago, ZachSaucier said:

If you put the timelineOne.reverse() inside of another function that is called, then it won't be invoked immediately. Thus the first .add() will play normally as it should and the second one will be reversed. Example:

masterTimeline
  .add(timelineOne.play(), 0)
  .add(timelineTwo.play(), 3)
  .add(timelineThree.play(), 3.5)
  .call(() => timelineOne.reverse(), 9)

 

I'm still having issues with this now ?, for some reason it now jumps to the end (or rather the start) of the timelines when I call them to reverse them. It does however work with the second mastertimeline method, anything I'm missing?

[ZachSaucier]

On 12/8/2019 at 12:15 AM, Andross said:

I would say that it's a reasonable assumption that they would want what happens earlier in the timeline to affect what happens later, rather than whatever is last just overwriting everything.

If this were true, which functions should this apply to? Should it apply to .seek()? .play()? Why not? They're control functions just like .reverse() is. You'd end up creating entirely new timelines affecting the same object that not only conflict but are increasing the amount of memory as well. 

 

We want people to be fully aware of what they're doing - if you tell the same timeline to reverse then it should reverse. We don't want to try to predict what their real intention is and force them to use our prediction instead of what they explicitly said to do. There would be way too many edge cases and it would bloat the size and runtime of GSAP immensely. 

 

On 12/8/2019 at 12:37 AM, Andross said:

I'm still having issues with this now ?

Happy to help! Just provide a minimal demo please  

[Carl]

if i understand correctly I think tweenTo() and tweenFromTo() can help

 

See the Pen JjoGMOy?editors=0010 by snorkltv (@snorkltv) on CodePen

 

docs: https://greensock.com/docs/v3/GSAP/Timeline/tweenFromTo()