Jump to content


dynamic duration value for infinitely repeating tween

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

So, I made this motorcycle where the spinning wheels speed up and slow down using basic easing and specifying the number of rotations for each duration- 

See the Pen rxKJLK by devindavid (@devindavid) on CodePen


I'm trying to put it on a road that moves at a speed corresponding to the speed of the wheels. So basically, dynamically changing the tween duration for an infinitely repeating tween.


The road- 


I've figured out the math for each 10 second duration (i'd change the acceleration and deceleration of the wheels to 10s), but I'm pretty new to Javascript, and can't seem to get it to work if i try to use a variable as the tween duration value. But, the math does seem to work in a JS console...


The value for the road's tween duration comes out between apx. 0.1s to 2s, and it works if I just use a number. Is there a way to write the code differently in order to pass the function into a TimelineMax where it runs the function for the specified duration? Ultimately the function will be added to the motorcycle's existing timeline.




See the Pen YwjNeV by devindavid (@devindavid) on CodePen

Link to comment
Share on other sites

Hi devindavid  :),


Welcome to the forums. I'm not sure I followed your question correctly, but I think you're asking how to feed the result of the roadSpeed function into the duration of your tween? That function is currently returning a negative number so adding it 'as is' would result in a negative duration tween, but you can change it to the following:

TweenMax.to(".roadLine", -(roadSpeed()), {x:"600px", ease:Power0.easeInOut, repeat:-1, delay:1 });

Hopefully that helps a bit. 


Happy tweening.



Link to comment
Share on other sites

The duration for a tween is a number, so you can't reference a function. What you can do is change the timeScale for a tween. So setting the timeScale to 0.5, it runs at half speed. Setting it to 2 will make run at 2x speed. Converting your time to the proper timeScale should be pretty straightforward. 

Link to comment
Share on other sites

Eh, I think I'm going to abandon this approach, I finally got it to work (kind of), but my math formula isn't producing the desired effect-

See the Pen YwjNeV by devindavid (@devindavid) on CodePen


I just ended up timing everything manually, which ended up being good because I had better control over things- 

See the Pen rxKJLK by devindavid (@devindavid) on CodePen


But, Here's what I did to dynamically update the repeating tween duration using an onRepeat callback and the .duration() method. Everything in the getDuration() function can be replaced with any variables and functions to calculate the value. 

function myTimedFunction() {
    var timerDuration = 10000;
    var d = new Date();
    var t = d.getTime();
var tween = new TweenMax.to(".element", 3, {
    function getDuration() {
        var elapsedTime = function(){
        var e = Math.floor(Date.now()) - t;
        return e;

        var remainingTime = function(){
        var r = timerDuration - elapsedTime();
        return r;
        var durationSpeed = function() {
        var j = remainingTime() / timerDuration;
        var k = Math.pow(j, 3) * (elapsedTime() / 2);
        var l = ((k + 300)/1000);
        return l;


window.onload = myTimedFunction();
setInterval(function() {
}, 10000);
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.