Infinite Loop (the good kind)

[Picadipity]

Getting back to my animation control that uses GreenSock.  I'm working on performance now and need help with what I believe is TweenLite.fromTo() pausing the animation while reseting the from location.

 

If you run the CodePen you will see a set of red rectangles numbered 0 - 15.  The rectangles are repeated for a total of 32 rectangles.  The animation starts at the second set of rects.  When the rectangle labeled 8 (r8) is centered on the screen the code will call TweenLite.fromTo() to reset the starting location from the r8 of the second set to the r8 of the first set.  The animation then repeats making it seem like there is an infinite loop.

 

The thing I'm having problems working around is that the animation pauses at this point.

 

There is also a stutters when a new rectangle comes on screen.  This could be a paint issue but maybe you know what the issue is?

 

System:

iMac (Retina 5K, 27-inch, Late 2014)

Processor: 4 GHz Intel Core i7

Memory: 16 GB 1600 MHz DDR3

Graphics: AMD Radeon R9 M290X 2048 MB

 

Running CodePen on Safari 9.1.3

 

If I run CodePen on Chrome (52.0.2743.116) I still get the stutter and the r8 transition is a little better but noticeable.

 

 

Thanks!

See the Pen Gjgxxw by picadipity (@picadipity) on CodePen

[Shaun Gorneau]

I just came to comment on the iMac specs ... nice!

[Picadipity]

Also, is it possible to set the speed (pixel/second) instead of always having to calculate the duration of the animation?  That would really simply the code!

[Jonathan]

Hello Picadipity and Welcome to the GreenSock forum.

I don't have a Mac to test on but what you can do us add a slight rotation:0.01 to tween to help smooth out x translations.

Add this to your fromTo() tween to help with the stutter

 

Your codepen forked with rotation:0.01

 

See the Pen WGvKEm by jonathan (@jonathan) on CodePen

 

tween = TweenLite.fromTo(".myPalette", animTime, {x:progressStart, rotation:0.01}, {x:-rectsWidth, rotation:0.01, ease:Linear.easeNone, onUpdate:onSlideshowUpdate});

Keep in mind that the stutter is a CSS transforms browser bug. Any time you translate X or Y you will see some time of non smoothness sometimes. But a slight rotation resolves this

Regarding the pausing please standby so we can see what is happening since you have a lot of code in your pen but only a couple of GSAP tweens. Be careful when using jQuery css() with GSAP, you want to make sure that any properties your animating with GSAP are set using the GSAP set() method so make sure that you are not changing CSS properties you want GSAP to animate. So GSAP can keep track of your CSS properties. Since it will not know when you change something outside it with jQuery css() method.

Please standby

 

Resources:

GSAP set() : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/set/

 

[Picadipity]

Great!  The rotation is a big improvement for the stutter.

 

Looking forward to your reply of the pause.

 

Thanks!

[Carl]

I found that removing line 112 will get rid of the pause:

var x = tween.vars.css.x;

I'm not sure what that is supposed to do.

I didn't have the time to try to decipher all your code but I'm wondering if you considered just using a single tween that repeats?

tween = TweenLite.fromTo(".myPalette", animTime, {x:progressStart}, {x:-rectsWidth, ease:Linear.easeNone, onUpdate:onSlideshowUpdate, repeat:-1});

I'm not really sure what all the calculations in onSlideShowUpdate are supposed to do, but my guess is that you should be able to calculate the starting and ending x values of where the loop should happen just once and then repeat that same animation over and over. Perhaps I'm missing something though.

 

If you want to create a looping carousel like this and NOT have to duplicate each item, check out the ModifiersPlugin demo here: http://greensock.com/1-19-0/ under the section"carousel wrap".