Jump to content
Search Community

Tweening timeline

Klas 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

Hello again,


I was using the tweenTo function of TimelineMax to scrub the playhead, but realised it's the only TimelineMax-exclusive function I'm using, so to save some load overhead I thought I could just use TimelineLite and manually tween the progress using a TweenLite instance like this:

var progress = { value: master_tl.time() / master_tl.duration() };
TweenLite.to(progress, 1.5, {value: labels[slideIndex].time/master_tl.duration(), ease: Strong.ease, onUpdate: function() {

From my performance tests using Chrome dev tools there's no real difference in performance, but I'm running the latest Macbook Pro so pretty much everything runs smoothly. Are there any performance optimisations going on in the TimelineMax.tweenTo function or other things I should be aware of?


I tried peeking at the source code and TimelineMax.tweenTo seems to be using TweenLite under the hood but going about it in a different way which I couldn't quite figure out despite the comments :oops: .

Link to comment
Share on other sites

Hey Klas,


Well in terms of performance normally the issues come from the rendering side instead of the code side. In simple words, in order to detect a performance issue due to code execution you'll need several thousands of tweens being executed at the same time in your code, in a loop for example, in order to be a real issue. But at that point probably rendering will be a bigger problem than code execution. Even in low end devices with poor hardware the issue is always rendering so the main concern would be the amount of extra data being loaded with TimelineMax which is just an extra 4kb using GZIP.


Also for particularly big scenarios (multiple tweens being rendered at the same time) the new version has taken a step forward:




Finally in order to tween the progress or time of your timeline you don't need to tween an object. Since a TweenLite/Max instance IS an object and progress and time are numerical properties of it you can tween those:

var tl = new TimelineLite();

// tween the timeline's progress between 0 and 1 for 1.5 seconds
TweenLite.to(tl, 1.5, {progress:1});

// tween the timelnie's time between 0 and it's total time for 1.5 seconds
TweenLite.to(tl, 1.5, {time:tl.duration()});

As you can see is far less code, uses the engine's capacity to tween anuy numerical property of an object and it reduces the possibility of an error.



  • Like 3
Link to comment
Share on other sites

In addition to Rodrigo's great advice I would simply add:


1) it's probably easier to tween the time() as you can very easily determine the duration the tween needs be by subtracting the current time (or start time) from the end time.


2) be sure to pause() your timeline before doing your custom tween of the time so that the timeline that is being tweened doesn't resume when your tween is done.

  • Like 1
Link to comment
Share on other sites

Thanks guys, really appreciate it. Did what you suggested and just tested it on a low-end Lumia phone and performance is amazing, especially considering how much stuff I'm moving around and the size of the elements involved.

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