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')

Hey Fredy. You're making one of [the most common ScrollTrigger mistakes](https://greensock.com/st-mistakes/): using general selectors when you should be using more specific targets. Additionally, you should avoid animating the transform property directly and instead use the transform properties like `x`. — Zach Saucier, Mar 22 '21 at 20:29
So if I'm doing a section that might have 2 or 20 elements, and this is generated with something that is not hardcoded, I'm boned? — Fredy31, Mar 23 '21 at 14:22
Not at all. You just need to scope your variables as the article I linked to covers. You can also see my article about [animating efficiently](https://css-tricks.com/tips-for-writing-animation-code-efficiently/) for more info. — Zach Saucier, Mar 23 '21 at 14:47

score 1 · Accepted Answer · answered Apr 06 '21 at 15:16

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')
      })

GSAP scrollTrigger - animating only the element that was triggered

1 Answers1