Sequence all objects with the same class

[SWALKER]

I have some headlines that appear the disappear, moving through each one 

I was using this...
 

var tl = gsap.timeline({repeat: Infinity, repeatDelay: .1});

tl.to("#rotation-1", {delay: .5, opacity:"100%", display:"inline"})
tl.to("#rotation-1", {delay: .5, opacity:0, display:"none"})

tl.to("#rotation-2", {delay: .5, opacity:"100%", display:"inline"})
tl.to("#rotation-2", {delay: .5, opacity:0, display:"none"})

tl.to("#rotation-3", {delay: .5, opacity:"100%", display:"inline"})
tl.to("#rotation-3", {delay: .5, opacity:0, display:"none"})

tl.to("#rotation-4", {delay: .5, opacity:"100%", display:"inline"})
tl.to("#rotation-4", {delay: .5, opacity:0, display:"none"})

tl.to("#rotation-5", {delay: .5, opacity:"100%", display:"inline"})
tl.to("#rotation-5", {delay: .5, opacity:0, display:"none"})
          

Which was working perfectly but now the client wants 13 headlines

I feel stupid because I KNOW that this can be simplifies by targeting all objects with the same class but I can't seem to find the right documentation - can anyone point me in the right direction? I am only just learning GSAP

I have managed to do this for items with the same class on a page, but not in a timeline

 

[SWALKER]

Okay so literally 2mins after I posted this worked - correct me if this is wrong but this seems to do the trick!

 

var tl = gsap.timeline({repeat: Infinity, repeatDelay: .1});

const rotations = gsap.utils.toArray('.text-rotation');
rotations.forEach(rotation => {
  tl.to(rotation, { 
    delay: .5, opacity:"100%", display:"inline"
  })
  
  tl.to(rotation, { 
      delay: .5, opacity:0, display:"none"
    })
  
});

 

[Cassie]

That's the way! Great job 🥳

[Cassie]

Ooh, a little adjustment - there's no such thing as Infinity - that should be -1 (unless that's a var in which case ignore me)

[SWALKER]

Thank you!