Reusing a Timeline as a scene transition

[sm1215]

Hi there,

 

I'm trying to figure out how I might be able to reuse a timeline multiple times as a scene transition.

I followed another codepen about nesting timelines (linked below) and I used this as an example to try and structure my animation. I've got a master timeline set up and I add several child timelines to it. I'd like to play them in order, but in between each "scene", I'd like to run a separate timeline as a transition overlay. It works well, up until I try to reuse the transition timeline. I'm not sure exactly how to go about getting it to start over from the beginning again. I've tried setting up and using labels, using .play() at a specific time, using .seek(), but have not had success. I know what I have in my codepen example is probably incorrect, but I left it that way so I could still get the basic idea across. Could anyone point me in the right direction?

Edit: Ideally, in my example, I would like it to play in the order: red box, black, green, black, blue. Instead, I'm seeing red, green, black, blue. I imagine I am overwriting the black transition scene when I add it a second time.

Thank you

Nesting Timelines example I followed:

See the Pen bkLwt?editors=1010 by GreenSock (@GreenSock) on CodePen

 

My own example:

See the Pen PKwBgP by sm1215 (@sm1215) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for taking the time to provide a nice and simple CodePen demo. Very helpful.

 

2 things to know about timelines:

1. They can only have one parent timeline, in other words they can only be nested in one timeline.
2. They can only exist once in a timeline.

The good news is you can still achieve the effect you are after. TimelineMax timelines have a tweenFromTo() method which creates tweens that basically scrub the playhead of the timeline from any position to any position.

 

Doing

 

someTimeline.tweenFromTo(4, "mustard");

 

will move the the timeline's playhead from 4 seconds to the "mustard" label.

 

Read the docs for TimelineMax.tweenFromTo()

 

So in your demo you can add animations that make the transition timeline play from beginning to end like so:

 

timeline
  .add(t1) //play scene 1
  .add(transition.tweenFromTo(0, transition.duration()), '-=0.0') //use transition overlay while scene 1 fades out, fade out should be hidden behind transition
  .add(t2, '-=0.25') //start fading in scene 2 before transition has fully faded out
  .add(transition.tweenFromTo(0, transition.duration()), '-=0.0')  //same idea as before, transition overlay should hide the fading out of the previous scene
  .add(t3, '-=0.25') //finally start bringing in scene 3 while transition is still fading out
  .add(transition.tweenFromTo(0, transition.duration()), '-=0.0')

 

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

 

[sm1215]

Ahh, that makes a lot of sense. Thanks for the insight on timeline usage. I wasn't aware of those 2 points, so that will be helpful in future animations. Also, really helpful to see it applied to my own demo. Thanks Carl! 

Edit: Also, seeing a few other additions in there that I hadn't thought to make use of. Starting the transition timeline in a paused state, and using a duration call on the transition timeline to find the appropriate toPosition. Really cool, thanks again