Jump to content


set timeline duration regardless of each tween duration in timelinemax

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

is there anyway to set timeline duration regardless of each tween duration in timelinemax?


i used this trick

tl.set({}, {}, 15);

but it only works when time line length is less than the new value


Link to comment
Share on other sites

Hi nbashiri95,


Welcome to the forums!


It's normally quiet here during the weekend but it's raining around here so, I happened to be around. :D


You can set the duration of the timeline with either .duration() or .totalDuration() (only for TimelineMax). More info in the docs.


Happy tweening!

  • Like 4
Link to comment
Share on other sites

Hi nbashiri95  :)


Welcome to the forums.


Dipscom is right - you want to use duration() for that. It's important to note that by using duration as a setter, you're not changing the actual duration of the timeline, but you are adjusting the timeScale()


If I have 5 boxes and use the following code:

tl.staggerTo(".box", 1, {x:500}, 1);
tl.staggerTo(".box", 1, {rotation:360}, 1);


That timeline will play over 2 seconds, but the console will still log the duration as 10 seconds. 

Here's a simple CodePen with that setup for you.

See the Pen RRLrmb by PointC (@PointC) on CodePen

Hopefully that helps.
Happy tweening and welcome aboard.
  • Like 4
  • Thanks 1
Link to comment
Share on other sites

thank you for your attention,


the problem is i want to change the timeline length without affecting tweens, i wanted to know is there any way to implement that?

considering I'm adding tweens after page load.

  • Like 1
Link to comment
Share on other sites

I don't follow. What is it that you have in mind when you say you want to change the timeline length without affecting the tweens? One is linked to the other. A timeline length will be the accumulated duration of the tweens, pauses and repeats.

  • Like 1
Link to comment
Share on other sites



Beyond what Dipscom and Craig have suggested already, there's no way around this. Altering the natural duration of a timeline will affect the duration of it's nested instances and viceversa. A timeline is a container of tweens and other methods, just that. So when the timeline starts at time zero all instances in it are set to that specific position and the timeline will be completed once all the instances in it are complete as well.


Changing the duration of the parent timeline will change the original duration of it's nested instances, specially if you set a duration smaller than the original (as you already discovered), that will proportionally reset the duration of the nested tweens in it to accommodate them to the new parent duration.


Could you share a small reduced sample in codepen in order to see what you're after?. To be completely honest I can't remember another user asking for this type of functionality before.


Finally the only way around this is to create two different timelines, one with the instances in it and an empty one with a shorter duration and all the needed callbacks, but again I'm having a bit of a hard time wrapping my head around what you need.



If you need some sort of specific callback before the timeline is completed you can use either the add or call methods.


Call Method



Add Method


  • Like 4
Link to comment
Share on other sites



The only thing i can think of is, if you meant to change the timeScale() of your timeline/tweens.




Factor that's used to scale time in the animation where:

  • 1 = normal speed (the default)
  • 0.5 = half speed
  • 2 = double speed, etc.
myAnimation.timeScale( 0.5 ); //sets timeScale to half-speed

Using timeScale() allows you to have your animation time to be scaled, whether it be half-speed, double the time, or whatever you want it to be.


If this doesn't help,or you didnt mean this..  then a codepen example like Rodrigo advised will be very helpful in helping you!



  • Like 3
Link to comment
Share on other sites

Hi nbashiri95,


Everything the guys have said about changing the duration() of a timeline altering the duration of the child animations is true, but I think you meant something different. It sounds to me that you just wanted to make sure that even if your timeline only had 3 seconds worth of animation in it that new tweens would be added at 15 seconds. In other words you wanted to add 12 seconds of dead space after the existing tweens (thus making the duration() 15).


If this is the case then, yes, what you suggest with adding a blank set() at 15 seconds is fine.

tl.set({}, {}, 15);

similarly you could just use 15 as the position parameter of the first tween that you add after page load like:

tl.to(element, 1, {opacity:0}, 15);

If you need more help or clarification please let us know. Hopefully you can see that everyone is eager to help :)

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

In Flash/AS3, I remember being able to add a label at a specific time beyond the last animation, and it would extend the overall timeline's duration to that label. I thought this was working in JS, but after closer inspection, it wasn't. tl.set({},{},time) worked!


For those wondering why this might be needed, here's my use case. I'm syncing up some animations to a video. The GSAP timeline needs to be as long as the video duration even though the animations might not last until then. When I seek/play/pause the video, the timeline is seeked/played/paused accordingly. I was running into issues when seeking to a part in the video that was beyond the timeline's duration (before this fix).

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.