Jump to content
Search Community

Variable speed

Phill 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



I have the following code (which is a timeline within a timelime). The animation repeats 11 times.


var stepTimer = .35;
var bodyRotateTo = .6;

bodyBounce.fromTo($car, stepTimer, {y: "+=2", rotation: bodyRotateTo, ease: easeInOut}, {y: "-=2", rotation: .3, ease: easeInOut});

What I'm trying to do is change the speed (or stepTimer) as it plays. I want the animation to happen every .35 seconds, and after each repeat increase by .1 of a second. After it hits a certain point I then want it to decrease to it's original speed.


I have no idea how to implement this. I thought I could call a function onComplete to handle it, but that didn't work.


Any ideas?


It has to be set up like this because it's in a timeline.




Link to comment
Share on other sites



You could use timeScale() to get that speed modification.


You'll need a little math, since timeScale works in a particular way. For example if your animation lasts 10 seconds at it's regular timeScale (1 by default), if you alter timeScale value to 2 it'll complete in 5 seconds:

var t = TweenLite.to(element, 10, {left:300});

// with this code the tween will complete in 5 seconds

// complete in 2.5 seconds

// complete in 1 second

So basically the new duration of the particular instance is the instance's duration divide by the new timeScale.


What you could try is run a function using the onRepeat callback, so every time the tween/timeline repeats you can modify it's timeScale and adding some conditional logic you can achieve the part of going back to a normal speed:

var t = TweenMax.to(element, time, {vars, repeat:11, onRepeat:repeatFunction}),
    repeats = 0;

function repeatFunction()
  // how much of the current time 0.1 is
  var addedTime = 0.1 / time,

  // if the speed should go up
  if(repeats < amount)
    newScale = t.timeScale() - addedTime;
  // if the speed should go back to normal
    newScale = t.timeScale() + addedTime;

The math behind this is very simple. You set how much of the current duration 0.1 second is, then you add or substract it to the current timeScale (the method acts as a getter or setter) and then you set the new timeScale.



  • Like 1
Link to comment
Share on other sites

timeScale() may be a great fit here, and I thought I'd offer one other alternative (not necessarily better - just different). You can set the duration() of the timeline itself - that actually alters the timeScale for you accordingly. So you can choose whichever way is most intuitive for you personally. For example:

var tl = new TimelineLite();

//then later, set it to exactly 10 seconds long:

//or make it 2 seconds longer than it currently is:
tl.duration( tl.duration() + 2 );

You could also pause() the timeline and tween its "time" to animate the playhead (don't forget to use a Linear.easeNone ease). Lots of options :)

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