GSAP scrollTrigger - 仅动画被触发的元素答案

【问题标题】：GSAP scrollTrigger - animating only the element that was triggeredGSAP scrollTrigger - 仅动画被触发的元素
【发布时间】：2021-06-19 11:59:18
【问题描述】：

我正在使用 GSAP 开发动画。所以我想要做的是当团队成员卡进入视口时对其进行动画处理。

当该部分只出现一次时很容易，但该卡片组件在页面团队中出现 10 次。使用我当前的代码，当第一个被击中时，它们都会触发动画。

有没有办法在定义动画时只针对当前触发元素的子元素？在 Jquery 中使用某种 This like。

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

【问题讨论】：

嘿弗雷迪。您正在制作the most common ScrollTrigger mistakes 之一：当您应该使用更具体的目标时使用通用选择器。此外，您应该避免直接为变换属性设置动画，而应使用 x 之类的变换属性。
所以，如果我正在做一个可能有 2 或 20 个元素的部分，并且这是用非硬编码的东西生成的，那我就完蛋了？
一点也不。您只需要将变量范围设置为我链接到的文章所涵盖的范围。您还可以查看我关于animating efficiently 的文章了解更多信息。

标签： javascript gsap scrolltrigger

【解决方案1】：

这就是我修复它的方法。我在每个元素上设置了一个随机 ID，然后遍历所有元素，给它们一个不同的时间线。


$('.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')
      })

【讨论】：