Jump to content


How to create fixed duraiton timeline?

Moderator Tag
Go to solution Solved by jamiejefferson,

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

If I have an animation somewhere on the timeline, also I have a defined value which contains the smallest duration when this timeline can finish, is there a better way to achive this than the attached codepen?


tl.to("#redBox", 2, {
  x: 200,
  delay: 0.5


My animation's duration is 2,5 seconds, but I would like the timeline to complete only after 5 or more seconds.


tl.to({}, 5, {}, 0);


Then I have this empty animation with 5 seconds duration starting at position 0, but it seems too hacky. Is there any in built way to do this?


(I saw that .duration(value) setter is not made for this as that just change the timescale. I don't want to change the behaviour of the animations.)

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

Link to comment
Share on other sites

Hi RolandSoos  :)


it seems the empty tween is the best way and the only way for your target , at least that's i know ...

Link to comment
Share on other sites

May I ask WHY you want to have padding at the end? 


If it's because you want to call a function (like an onComplete) after X amount of time, you can simply place a callback at that spot using the call() method. If it's because you want to repeat the timeline, but allow there to be a delay between repeats, you can use the repeatDelay special property. 

Link to comment
Share on other sites

Ther user can define the minimum duration for the timeline and also he can add custom animations to this timeline on an interface. I have to make sure that my onComplete call, only calls

  • When all of the animations are played on this timeline
  • Also the defined minimum duration conditions are met

The extra animation seemed the best way for me to achieve this one, as I don't have to make extra checks.


If I just go with the original timeline, I should check onComplete, the timeline duration, if that duration is higher than the minimum duration, then just call the original complete call, but when it is not, I should create a timeout for the (minimumDuration-timelineDuration) time and meanwhile this timeout, I should be able to tell other components that the animation (this empty part) isn't over yet, so not start another action.

Link to comment
Share on other sites

  • Solution

You can also shorten the code for the dummy tween to

tl.set({}, {}, 5);
  • Like 1
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.