Jump to content


Events with negative position inside a nested Timeline

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

Negative start times don't seem to be respected in any of the Timeline flavors. 


Negative start times would be extremely useful for nested Timelines that are supposed to conclude at a given time. Following the pattern of objects that return Timelines describing their animation, one would have to measure the duration of the returned Timeline to get this behavior.

SomeObject.prototype.getAnimation = function() {
    var anim = new TimelineLite();
    anim.to( this, 10, { foo: bar }, 0 );
    return anim;

var animation = someObject.getAnimation();
mainTimeline.add( animation, 5 - animation.endTime() ); // where 5 is "arrival" time

What would be much nicer is for that "10" to be contained within the animation itself.

SomeObject.prototype.getAnimation = function() {
    return new TimelineLite().to( this, 10, { foo: bar }, -10 );

mainTimeline.add( someObject.getAnimation(), 5 );

Also speaks to the idea of GSAP tweening methods accepting an 'end time' parameter as opposed to duration. Curious to know if there is already a method in place to get this behavior.

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

  • Like 1
Link to comment
Share on other sites

First, a minor correction: I think you meant totalDuration() instead of endTime() here:

mainTimeline.add( animation, 5 - animation.totalDuration() );

(remember, endTime() is measured according to the parent timeline's time. In other words, if you put a 1-second tween into a timeline at a position of 5, its endTime() would be 6, assuming its timeScale is 1). 




You're correct about negative startTimes being disallowed. Thats absolutely by design. Here are a few of the reasons:

  1. It's counter-intuitive. If you have tweens that start BEFORE the timeline's own start time, what happens when you tell your timeline to restart()? Would those tweens render already finished (or partway finished)? Or would it go back and start at a negative time? Lots of things start getting really weird when you allow tweens to get scheduled before the timeline's own start. Try to imagine an After Effects or Flash or Edge Animate (or whatever) IDE timeline that allows you to drag tweens so far back that they go beyond the start of the timeline. If that's allowed, timing starts losing its meaning. If I schedule a tween to start at 2-seconds, it should mean something. But if later somebody adds a tween with a negative start time to that timeline, my 2-second start time may no longer mean 2-seconds anymore - it may start 5-seconds or 10-seconds into the timeline depending on how far back other tweens go with negative start times. 
  2. GSAP is highly optimized for speed, and part of that involves employing an algorithm that knows when to ignore child tweens/timelines that are positioned AFTER the current time. In other words, if I tell a timeline to render itself at 2 seconds, it should be able to ignore a child whose startTime is 5. But if we start allowing negative startTimes inside of that nested timeline, suddenly that algorithm doesn't work anymore and we may have tweens that bleed backwards over the starting boundary and don't get rendered properly. Changing the algorithm would incur a performance penalty. 

Currently, if a negative startTime is sensed, it will shift everything forward to line that up with the 0-position, thus everything stays synchronized but moves forward together inside that timeline. 


Unless I'm missing something, it does seem like you can accomplish what you're after using the existing API, as you demonstrated. I totally understand why you wanted a way to only define the end time and have GSAP do the math for you to position it accordingly but I can't really think of a good way to accomplish this beyond what's already possible. I'm certainly open to suggestions though. 

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