How to achieve the svg replacement effect by using stagger.

[GM_sql]

Hi, I have a very simple animation and I need to apply the below criteria to get the the replacement effect:
1) after each animation of a single "box_info" item I need to pause the stage, say 1s,
2) after each animation of a single "box_info" item I need to restore it's style: opacity to 0.

Is it possible to apply stagger, and how ?
 

const play_intro = gsap.timeline({paused: false, repeat: -1});

play_intro.from(".box_info", {autoAlpha: 0, stagger: 1, onComplete: console.log("end")})

[PointC]

I'm not 100% sure what you're asking, but you can call onComplete for each staggered element and target it like this:

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

 

If that doesn't answer your question, could you provide a minimal demo please? Thanks.

 

Happy tweening.

 

[GM_sql]

Thank you @PointC
This is exactly what I'm looking for, however I still have a problem in order to coordinate the very last and the very first items between loops (purple -> green). Here the modified code.

See the Pen mdprZeM by grzegorz-malinowski (@grzegorz-malinowski) on CodePen

[PointC]

const play_intro = gsap.timeline({repeat: -1, repeatDelay: 0.5});

 

[GM_sql]

Works perfectly. Thx.