Seamlessly loop of complicated logo section

[charlescollective]

Hi,

I've thrown together a basic codepen where you'll see some circles growing in and shrinking in a loop. These will be client logos and could have 10-15 logos in the final outcome -  

The problem is at the start and end points of the timeline - we start with nothing visible and end with nothing visible before looping again. I've tried to combat this with the use of .totalProgress(0.5); to start the timeline at 50% with repeat: -1, but this just sends the timeline back to the start once the timeline has finished (rather than looping from the 50% mark specified). It also seems like my usage of it hasn't even worked in setting to the half way point. With this method, I'd also need to specify an end point to the tween that isn't 100% (end of timeline) in order to make sure there are always 3 circles visible at all times and creating a seamless loop.

I'm not sure if my approach is completely off on the wrong track or not but I'd be really grateful to hear your ideas on how to make this work.

Below is a gif of the sort of thing I'd like to achieve...

Thanks in advance!

See the Pen JjzbROZ by charlescollective (@charlescollective) on CodePen

[mvaneijgen]

Hi @charlescollective welcome to the forum!

 

Check out this amazing tutorial our own @Carl did, it might be a bit hard to wrap your head around at first, but with the visuals and the clear demonstration, this is the best way I've learned. Hope it helps and happy tweening! 

 

 

[mvaneijgen]

I strongly encourage you to try your hand and creating this animation with the tutorial above and don't yet look at the solution below! I thought it would be a fun challenge to see what all was needed to create this because @Carl's example only animates between two items and I thought maybe I was overlooking something, but nope! With the same logic as you can create this, it requires a bit if a rewrite and you could make a lot if the settings dynamic with JS variables, but that requires a bit more of a time investment. 

 

I’ve placed some comments in your JS and CSS to better explain things, please be sure to read through them!

 

Quote

⚠️ Again, please be sure to try it your self before you check the solution, you'll learn so much more doing this your self !

 

See the Pen VwRmXWW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[PointC]

I like the solution above provided by @mvaneijgen. 👍

 

Another approach would be to put each target on its own timeline and those timelines are added to the parent.  I've also moved some of the CSS settings to GSAP in the JS so you can change the width/height of the targets with one variable and also set the number of targets that visibly move across the stage. This also sets the start of the timeline to the proper point where the stage is filled at the beginning. Again, the above solution is great, I'm just throwing out other ideas. Happy tweening.

 

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

[charlescollective]

Awesome thank you guys for your help. Much appreciated as I've got it working thanks to your solutions. 🤝