Jump to content
Search Community

Combining timelines

Dennis Laupman 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

Dear GreenSock Hero's


What I want to do is insert the "widget" timeline into the Base timeline. It doesn't work :S. The temporary loop animation stops instead of looping until the stop button is triggered.


The case is that i want to mark the stop event. So i can scrub back in time and (re)play the exact animation.


Is this possible?


Thanks a lot!


Grtz Dennis

See the Pen Pwqvgz by anon (@anon) on CodePen

Link to comment
Share on other sites

hmm, I really don't know what you mean by a widget timeline, nor did I see any reference to a stop button or scrubber.

Maybe you changed that pen since posting?


Either way, I saw you were using .add(pause) to trigger your own custom pause method.


Please see the fork of your pen here which uses the .addPause() method which will be much more accurate: http://codepen.io/GreenSock/pen/ogXKXW


If you call an external function to pause the timeline, there will be a little amount of time that takes place for the function to execute and what will happen is the pause will happen slightly after you intend it to.

  • Like 1
Link to comment
Share on other sites

Hi Carl,


Thanks a lot for your reaction. What I want to try, is to embed the Widget timeline in the Base timeline.  After in insert the Widget timeline in the Base timeline, the Widget timeline doesn't loop anymore. 


You can slash out line #41 to see what the supposed behaviour should be.


Thank you for helping me out!


Grtz Dennis

Link to comment
Share on other sites

Yeah, like Diaco, I really don't know what you are referring to when you say Base timeline or Widget timeline.

Are you sure we are looking at the right code? This is what I see in your pen


var red = $("#red");

var tl = new TimelineMax({paused:true});
tl.to(red, 1, {left:100}, "label1")
 .to(red, 1, {rotation:360}, "label2")
 .to(red, 1, {scale:.5}, "label3")
 .to(red, 1, {backgroundColor:"green"}, "label4");

function pause(){

$('#nextLabel').on('click', function(){


$('#label2').on('click', function(){


Perhaps clear your cookies and test your link again: http://codepen.io/anon/pen/Pwqvgz

Link to comment
Share on other sites

I think there are a few ways to interpret what you want to do. 

Diaco solves the problem of inserting the widget into the base and being able to scrub.


I think you were asking though how you can record all the loop iterations and scrub through them.

It is not possible with your approach of looping to a label repeatedly because that does not add new tweens to the widget timeline and for the most part, the Base timeline has no idea that it should be recording those iterations (and it shouldn't)


So if you want the animation to play and loop for 10 seconds and then later you want to scrub back through all those loop iterations, you need to be repeatedly adding new tweens to the widget timeline. In essence you are dynamically building the timeline in real time.


Check out this codepen




I simplified the UI to prevent problems

Just let the demo run for a few seconds and then click one of the stop buttons. You will then be able to scrub back trough the entire animation that you saw.


The problem with showing the scrubber while the animation is running through on load is that the playhead will keep jumping back each time new tweens are added and it looks kind of weird. 


Hopefully both Diaco's pen and mine help you understand the problem better.

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