Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


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

myTimeline.add(TweenLite.to(myCanvasObj, <end of timeline?>, {
  progress: 1,
  ease: Linear.easeNone
}), 0);

I have the following code on top, following by adding some other tweens, that extend to lets say 30 seconds. Is there a way to tell the tween that i want to animate it to the end of the timeline, in this case 30s without specifying 30? Because I might want to add new tweens and don't want to calculate the new time end everytime i add a new tween. Thanks.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.
Considering the code you're posting, you're adding an instance to the timeline that you want to be as long as the timeline itself.
GSAP has two methods, duration() and totalDuration() for this cases.
If your timeline has a repeat value and you need to consider those repeats as well, ie, give that instance a duration that equals the duration of the timeline with all the repeats you can use totalDuration. If you're using a TimelineLite instance or you want that particular instance to repeat as well just use duration().
Total Duration
Now in terms of when the instance is created it has to be after you've added every other instance to the timeline, otherwise it'll get the wrong duration. If you create that instance before adding anything to the timeline, it's duration will be zero.

// create the timeline
var myTimeline = new TimelineLite();

// add all other instances to it
  .to(element, time, {vars})
  .to(element, time, {vars})
  .to(element, time, {vars})
  .to(element, time, {vars})
  .to(element, time, {vars});

// now add the instance that should last all the timeline's duration
myTimeline.add(TweenLite.to(myCanvasObj, myTimeline.duration(), {
  progress: 1,
  ease: Linear.easeNone
}), 0);

Finally please take a look at this post in order to learn how to create a basic live example in Codepen, which is always very useful to identify the issues faster, which ultimately allow us to give a proper answer faster:




  • Like 2
Link to comment
Share on other sites

That's freaking awesome, it knew that totalDuration function, but I didn't think of adding that tween last. Thanks appreciate it.

Link to comment
Share on other sites

Umhh... you have forgotten the link master Schooff ;)

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