Posts posted by 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
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!
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
Infinite loop (and reverse) without Timeline
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!