Infinite loop (and reverse) without Timeline

[JavierM]

Hello,

 

First of all thank very much for this incredible tool! I am an absolute noob developing animations (and web pages) and thanks to GSAP I've had to do so little efforts to learn .

 

I am trying to rotate a image and control the animation, very similar to the Ferris example: 

 

See the Pen wBbKs?editors=1010 by GreenSock (@GreenSock) on CodePen

 

The user can select if the rotation is clockwise or counterclockwise. This is my question: is it possible to do a infinite reverse loop without TimelineMax, just a TweenMax instance?

 

The problem is that, related with this rotation, I am drawing a sine wave based on the tween progress. However, when TimelineMax reaches onReverseComplete or onComplete, a small lag can be checked in the sine wave drawing, distorting the result. I do not find this lag if I use only TweenMax, but I am not able to do a reverse infinite loop only with TweenMax...

 

Thank you in advance!!

 

 

See the Pen wBbKs.  by GreenSock (@GreenSock) on CodePen

[GreenSock]

I'm a little confused about this "lag" you're talking about that doesn't exist in TweenMax but does in TimelineMax - can you show me an example? Those tools have the same logic applied internally. 

 

And by the way, I assume that "lag" simply has to do with the time between when a tween/timeline ends, and when you are manually restarting/reversing it which isn't a bug at all. And actually, a lot of work went into making sure that none of those lags ever happen inside repeat cycles of a TimelineMax or TweenMax (I think every other engine I've seen uses logic that permits that lag - GSAP is the only one that protects against it). If you need to manually do the restart/reverse, there are ways you can do it that won't permit any gap between frames, but it'd really help to see an reduced test case from you so that I'm sure we're talking about the same thing. 

[JavierM]

Ok, I've tried to simplify and isolate the important code:

 

See the Pen zqRrJo?editors=1010 by MrFrames (@MrFrames) on CodePen

 

I'm using highcharts to draw the sine wave. Select counterclock wise, the animation starts. Set the speed slider to the maximum. Check the sine wave: when it goes up upwards (around amplitude -2.5), suddenly it appers a small distortion in the wave (closer look), that is what I've called "lag", that coincides when TimelineMax is restarted.

 

However, if you use only Tweenmax, that lag in the sine wave doesn't appear:

 

See the Pen mPjQao?editors=1010 by MrFrames (@MrFrames) on CodePen

 

I hope that you can check this issue in the examples. I have basically token the ferris example and modified it. The magnitude of the distortion could be discussed; it is true that is very small, but there it is. In the whole project, with much more info and curves, that lag is more evident. And, of course, another engine that is not GSAP is not and option!    At least, I am satisfied if you say that there are possibilities to make infinite reverse loops, becasue there are no examples anywhere, I will try it! 

 

And apologize for the code, these are my first steps in html, javascript, GSAP 

[GreenSock]

I wish I had more time to read through all that code and try to comprehend exactly what's going on with everything, but unfortunately I don't. If you'd like some help, we really need more of a reduced test case that only focuses on the GSAP-specific stuff (or just ask us a GSAP-specific question and we'd be glad to answer). When there are so many other moving parts, libraries, and graphing code, there are too many factors. 

[JavierM]

Ok, I understand. So forget my example and the lag. Let's focus on the GSAP example, the ferris. Just I'm trying to do a infinite reverse loop, that currently it isn't implemented. And without TimelineMax, only a simple TweenMax instance.
My first attempt was to update the rotation angle sign each time that the reverse /play button was pressed, without success. Something similar to this:

 tl.invalidate()
 tl.vars.css.rotation= 360;
 tl.play(); 

My best attempt is this one, redefining the tween effect every time the button is pressed. However, first the progress slider doesn't change the direction, and second, if you press several consecutive times, the tween appears to decelerate. The codepen is:

 

See the Pen qZywWy?editors=0010 by MrFrames (@MrFrames) on CodePen

[GreenSock]

There are many, many ways to do this but if I understand your goal correctly, you can simply use a relative value with a "+=" or "-=" prefix. For example:

//to rotate forward 360 degrees from the current value forever: 
TweenMax.to(element, 1, {rotation:"+=360", ease:Linear.easeNone, repeat:-1});

//to rotate backward from the current value forever:
TweenMax.to(element, 1, {rotation:"-=360", ease:Linear.easeNone, repeat:-1});

That's probably the simplest option. 

 

If you need to reuse the tween/timeline, you could use a more advanced technique:

var tl = new TimelineMax({repeat:-1, onRepeat:checkReverseLoop}); //or TweenMax, doesn't matter. 
//call this whenever you want to trigger the infinite reverse
function infiniteReverse() {
    tl.reverse();
    checkReverseLoop();
}
//if it's on the final backwards cycle, we shoot it forward 100 cycles from exactly wherever it's at so that everything is perfectly seamless. It never reaches "0" in reverse. And the "100" cycles isn't magical - you could use any number. The point is to just keep it from ending the final backwards cycle. 
function checkReverseLoop() {
    if (tl.reversed() && tl.totalTime() <= tl.duration()) {
        tl.totalTime(tl.totalTime() + tl.duration() * 100, true); //just shoot it out 100 cycles forward and suppress events
    }
}

Does that help? 

[JavierM]

That was it!  Second option works like a charm. I got the idea. And in addition, regarding what I've called lag, it dissapeared...

 

Thank you so much, Jack!