Repeat not working with delay

[Christina1234]

Hello gsap magicians,

 

I'm trying to create this animation, where on load all the images stagger out, then have each image animate from 0% to 100% width over top of the previous image. It kinda works, but if I add a delay to the animation it breaks the continuous look of the animation. Can anyone help?

 

Much appreciated!

See the Pen VwOrWrz by ckosik (@ckosik) on CodePen

[Cassie]

Hey Christina!

I've rewritten this a little for you,

 

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

 

Some notes & further reading.

 

Use transforms where possible instead of width/height/margin etc as it's better for performance (smoother animation)

 

This solution is based on a technique called staggered staggers which @Carl from the wonderful creative coding club explains here 
https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

This thread covers more details about your particular use case, where you have images overlapping and z-index changes

 

Hope this helps to give you a better starting point!