Jump to content

Mr Pablo

Need to set total duration, but not affect timeScal...

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

I know I can use "duration()" to set a total timeline duration, but by doing so, it changes the timeScale().


I need to be able to make an animation 20 seconds long, but it may only have 10 seconds worth of animation (leaving it static on screen for the remaining 10 seconds)


I have 2 animations in a timeline, both are seperate from each other and need different total durations.


Is there a way to add a "spacer" tween of sorts?

Link to comment
Share on other sites

Sure, I'd say the easiest way would probably be to add a dummy "set" call that doesn't really do anything except take up space:

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

Notice the target is a generic object and the vars param is an empty object, so nothing really gets set/tweened, but nevertheless there's a zero-duration tween that gets dropped into the timeline at exactly 20 seconds. 


Does that help? 

  • Like 1
Link to comment
Share on other sites

Seems to do the job! for now :P


EDIT - failed :( It works for the first animation (i added it in after the first animations .fromTo() tweens) but the second time it didn't work - the 2nd animation played then straight away went back to the first (its on repeat).

Link to comment
Share on other sites

Hi, not sure how you are building your timeline so that the "dead" space isn't consistently honored. 


Take a look at this codepen that uses Jack's suggestion:



The timeline plays multiple times and it's duration()  is 5 seconds because of the dummy set() placed at a position of 5.


If you still have trouble, please fork and edit that codepen so that it illustrates how your version is breaking. Thanks

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