Stagger animate 5 elements on same path with pausing?

[zzwes]

Hello,

 

I'm loving working with Greensock. I've used it for several websites already, and plan to keep using it as long as I can.

 

I made a merry-go-round of images using CSS:

 

See the Pen xyxoOg by couchwood (@couchwood) on CodePen

 

This works well most of the time, but sometimes gets hung up on slower networks, or has trouble on mobile, etc. I would love to recreate it using Greensock, but after several days and 5+ different ways of approaching this, I've run into blocks each time. I'm not entirely sure everything I'd like to have in the animation is possible, so I'm reaching out to the forums to see if there are ideas that I haven't thought of. Below is the best iteration I have, using a Bezier path with TweenMax and delay/repeat/progress.

 

See the Pen MPwRme by couchwood (@couchwood) on CodePen

 

The part I'm having trouble on now is I can't figure out how I would also do the pause during the animation, using TweenMax, a timeline or otherwise. Any help is appreciated, thanks!

 

- Wes

[PointC]

Hi @zzwes 

 

Welcome to the forum.

 

There would be a few ways to make this happen. Based on what you have so far, I'd probably create a timeline for each pizza and change the starting progress(). (Pretty much what you were doing).  I then added each timeline to an array, loop through it and increment the progress of each timeline by +0.2. every few seconds. I've just used a delayed call to keep the animation going, but you could certainly add some interactivity with a button or draggable too. Here's a fork of your pen.

 

 

See the Pen ReWwJj by PointC (@PointC) on CodePen

 

You mentioned poor performance on mobile. Please keep in mind that GSAP is only animating values. All the rendering is done by the browser so you may still see less than desirable results on mobile with these images.

 

Hopefully that helps. Happy tweening and welcome aboard.

 

 

[zzwes]

Hi Craig,

 

Thanks, glad to me here!

 

This is perfect! ?

 

I'm making some small tweaks to the timing and bezier points now that I have working functionality, but it's going to be great. Great community with lots of knowledge here, and I appreciate it.

 

Wes