Stagger command for a specific (list) of elements

[DreamInk]

Hey, 
I am relatively new to Gsap.
For many animations I use the 'stagger' command. To not lengthen the code unnecessarily.

(So I would like to use stagger and not each time fromTo...)

Now I wonder if it is possible to define the classes differently, where the 'stagger' command should run. 

 

Problem is that I use swiper as slider with the function loop. I would like to have only slide 3, 4 and 5 with the same animation.

So I can't use a "general" class either.

Is this possible in a way not to write 50 lines at the end?

 

 

Thanks for your answers.
Best regards,
Justus

See the Pen ZEBJPZr by Gamernamer (@Gamernamer) on CodePen

[GreenSock]

Sure, are you looking for something like this?: 

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

 

Simplified code: 

var tl = gsap.timeline({delay: 2, repeat: 10, defaults: {ease: "circ.in"}});
var slides3To5 = gsap.utils.toArray(".slide_container div:nth-child(n+3):nth-child(-n+5)");
gsap.set(slides3To5, {backgroundColor: "rgba(255,255,255,0)"});
slides3To5.forEach(function(slide, i) {
  var stagger = 0.1 + i * 0.2;
  tl.to(slide, {backgroundColor: "#000", duration: 0.7}, stagger)
    .to(slide, {backgroundColor: "rgba(255,255,255,0)", duration: 1}, stagger + 0.7);
});

 

[DreamInk]

Thanks a lot!