GSAP scrollTrigger - animating only the element that was triggered

Question

I'm developping animations with GSAP. So what I want to do is animate a Team Member Card when it gets in the viewport.

Easy enough when that section happens only once, but that card component happens 10 times in the page team. And with my current code, when the first one is hit, they all trigger their animation.

Is there a way to, when defining animations, to aim to only the children elements of the current triggered element? To use some kind of This like in Jquery.

var tl = gsap.timeline({
        scrollTrigger:{
          trigger: ".el-card-team-member",
          start: "top center",
          //onUpdate: self => console.log("progress:", self.progress.toFixed(3)),
        },
        scrub: 1
      });
      tl.addLabel('start')
        .set('.photo', {opacity:0})
        .set('.member-name', {transform:"translateX(-50px)",opacity:0})
        .set('.title', {transform:"translateX(-50px)",opacity:0})
        .to('.photo', {opacity:1,duration:0.3},'>')
        .to('.member-name', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
        .to('.title', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
        .addLabel('end')

Answer 1

So here is how I fixed it. I put a random ID on every element, and then go through all of them giving them all a different timeline.

$('.repeating-element').each(function(){
      var id = $(this).attr('id');
      var tl = gsap.timeline({
          scrollTrigger:{
            trigger: '#'+id,
            start: "top center",
            //pin:'.px-home-s2-s3 .bg',
            //onUpdate: self => console.log("progress:", self.progress.toFixed(3)),
          },
          scrub: 1
        });
        tl.addLabel('start')
          .set('#'+id+' .photo', {opacity:0})
          .set('#'+id+' .member-name', {transform:"translateX(-50px)",opacity:0})
          .set('#'+id+' .title', {transform:"translateX(-50px)",opacity:0})
          .to('#'+id+' .photo', {opacity:1,duration:0.3},'>')
          .to('#'+id+' .member-name', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
          .to('#'+id+' .title', {transform:"translateX(-0)",opacity:1,duration:0.3},'>')
          .addLabel('end')
      })