Jump to content
Search Community

TimelineMax.totalDuration() returning previous value after new value has been set

muaddoob 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

In the fiddle below I am creating a simple tween in a TimelineMax instance.  I change the totalDuration from 1 to 5 and then alert the value of totalDuration().  I expect to get 5 returned but I am still seeing the original value of 1.  The duration does update correctly (the tween slows down) but the return value does not reflect this.


Link to comment
Share on other sites

Please, read this:




Duration() just changes the timeScale accordingly. It doesn't physically crunch or expand the duration of your tweens.



This will work as you expect:

var tl = TweenMax.to($("div"), 1, {css:{left:"100%"}}).totalDuration(5);
  • Like 1
Link to comment
Share on other sites

Looks like we ran into the same confusion around the same time :)  I propose either different names for these or having a uniquely named method that handles the get.  It's confusing to have a 'get' return a different value than its corresponding 'set'.  

In either case, is there currently a method that returns the value I'm expecting? My real world use case isn't as academic as that fiddle.  The durations I'm setting are calculated dynamically and I need to retrieve them at a later point in time.  For now, I'm stashing them in an array but it would be nice to be able to query the timelines for them.

Link to comment
Share on other sites



Thanks for jumping in and providing the link.




Sorry, for the trouble. Hopefully the link above explains why it works the way it does sufficiently.

Currently there isn't a method that returns the altered / simulated duration. Its a worthy suggestion. I'm sure the team will talk it over.


What you can do is divide the duration() by timeScale().



var tl = new TimelineMax();
tl.to($("div"), 1, {css:{left:"100%"}});

//alerts 5



If its something you use often enough you could even build your own helper method



function getAlteredDuration(timeline){
  return timeline.duration() / timeline.timeScale();
  • Like 1
Link to comment
Share on other sites

Yeah, it's a tricky issue because one of the really nice things about GSAP is that all of the core classes extend a common "Animation" class, thus they share a bunch of common methods and properties. That makes it super convenient to do things like this:


function transitionIn() {
    //return a tween or timeline

var t = transitionIn();

When you're building complex animations, it's very convenient to not have to worry what kind of animation it is, and just control it however you please with a common set of methods. 


So if we introduce a calculatedDuration() or something like that just for the timeline classes, we lose that API consistency and flexibility. We could add it to the tween classes too, of course, and it'd just always match duration(), but another one of the big concerns with GSAP is trying to keep file size to a minimum. And I don't want to bloat the API either (makes it harder to learn). I completely understand why it would seemingly make sense to add another method as you're suggesting, but since you can already (pretty easily) get the value you want (by dividing by timeScale), and because this is somewhat of an edge case, I'm inclined not to add a new method. We'll definitely keep this in mind, though, and if a LOT of users are running into confusion around this, we'll reconsider. 


We appreciate the suggestion(s). 

Link to comment
Share on other sites

We'd definitely like to make sure the docs are clear - could you tell me where exactly you were looking in the docs (where we could clarify better)? I read over the totalDuration() and duration() methods and they seem very clear about the change affecting the timeScale and that if you check the totalDuration/duration immediately after setting it to something different, there would be no change. I'm kinda scratching my head wondering where the confusion came in unless maybe you were looking at the totalDuration() or duration() methods of something like TweenLite or TweenMax or the base Animation class. 

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