A simple background loop for a banner

[Tom Roberts]

Hi Greensockers!

Another simple question from me.

I want to create a looping background using images for a banner I am creating but I am having issues getting it to work.

I have created a code pen to show the animation using background colours instead of the images I intend to use but I am getting a flash  when the animation loops. How can i prevent this flash and how do I stop the animation on the main timeline when the rest of the banner animations have finished playing?

 

Thanks in advance.

Neilb1969

See the Pen qBabKwO by neilb1969 (@neilb1969) on CodePen

[ZachSaucier]

Hey Tom.

 

The flashing is a logical issue: You have .from(... opacity: 0}) on each so that means at the start of each loop they are all going to have an opacity of 0 (hence the flash). I assume you want the first element to fade over the last element each time that it loops? I covered how to do that here:

It requires careful ordering of your fades and changing the zIndex.

 

3 hours ago, Tom Roberts said:

how do I stop the animation on the main timeline when the rest of the banner animations have finished playing?

What do you mean by this? The sub-timeline is infinite...