GSAP scrollTrigger - 仅对被触发的元素进行动画处理

问题描述

我正在使用 GSAP 开发动画。所以我想要做的是在进入视口时为团队成员卡片设置动画。

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

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

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',opacity:0})
        .to('.photo',{opacity:1,duration:0.3},'>')
        .to('.member-name',{transform:"translateX(-0)",opacity:1,'>')
        .to('.title','>')
        .addLabel('end')

解决方法

这就是我修复它的方法。我在每个元素上放置了一个随机 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',opacity:0})
          .to('#'+id+' .photo',{opacity:1,duration:0.3},'>')
          .to('#'+id+' .member-name',{transform:"translateX(-0)",opacity:1,'>')
          .to('#'+id+' .title','>')
          .addLabel('end')
      })