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

Question

我正在使用 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', {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

这就是我修复它的方法。我在每个元素上放置一个随机 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')
      })

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

GSAP scrollTrigger - animating only the element that was triggered

javascript

gsap

scrolltrigger