Overlap end of repeated timeline with start

[clayteller]

Hi, I have a set of squares which I want to display one square at a time, looping continuously. Each square fades in at the same time the previous square fades out.

I'm able to achieve this by overlapping these tweens in the timeline except I don't know how to overlap final tween in the timeline with the first tween when the timeline repeats.

Can someone please tell me how to configure my timeline so that the final tween overlaps the first tween in the timeline when the timeline repeats?

I've seen some topics touching on this, but they were a little older and there were different solutions suggested. Is there perhaps a simple method or parameter I've overlooked that would accomplish this?

Thanks!

See the Pen GRmYeap by clayteller (@clayteller) on CodePen

[GreenSock]

There's no magic to it - you've gotta work through the logic because what you've got isn't a true loop. You're starting out with a totally white screen and the first one fades in, but that does NOT happen on all the rest of the iterations of the loop, thus you can't include that in the repeating timeline (otherwise it won't be seamless). You've gotta think in terms of matching up the end and start states of the timeline. Here's what I'd do: 

 

See the Pen abWRgyY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[clayteller]

Thanks Jack, I really appreciate you creating this solution so quickly. Honestly, I was kind of hoping for a magic solution 😌 since I'm not a super strong javascript programmer, but I think I follow the logic in this solution. Now hopefully I can take this logic and apply it to my actual project, which has a few other moving parts. 🤞

Thanks again, this really is the greatest of all support forums.

[clayteller]

For future visitors also looking to create a seamless loop, here's another solution that @Carl (thanks Carl) explains in detail on https://www.snorkl.tv/greensock-staggers-with-seamless-loops/.