Jump to content
Search Community

automatically calculated duration

beamish 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

Hi,

 

Is it possible when adding a tween to a timeline, to have its' duration be automatically as long as the time gap until the next tween on the timeline (and the last until the total duration of the entire timeline)?  So that if, for example there are 3 tweens at time 0, 7 and 10 each, on a time line with a total duration of 20, the first would have a duration of 7 seconds, the second - 3 seconds, and the last - 10 seconds?  and if the second tween is removed - then the duration of the first tween will automatically update to 10 seconds?...

 

If it's relevant, all tween target the same dom element.

 

Thanks!

 

beamish.

Link to comment
Share on other sites

Possible, yes. Automatic, not really. You would have to create your own function to calculate the duration()s and insertion points.

 

 

The API does not have a method that specifically closes gaps.Methods like getChildren(), , startTime(), duration() and shiftChildren() make it possible to modify a timeline and child tweens virtually any way imaginable. 

 

To remove the 2nd tween and make the first tween long enough to fill up the space between the first tween and beginning of the third tween you could you could write a function that dynamically finds the duration() of the first tween and the startTime() of the third tween and then use the difference to add to the duration() of the first tween.

 

When you add a tween, I'll assume you know where (at what time()) it should be inserted. You could then loop through the children and find the next tween that has a startTime() greater than that insertion time. 

 

All this works very well in theory but it can get complicated fairly quickly depending on how flexible and dynamic this has to be. Hopefully this is enough to get you going in the right direction.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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