0

我正在用 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')
4

1 回答 1

0

所以这就是我修复它的方法。我在每个元素上都放了一个随机 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')
      })
于 2021-04-06T15:16:17.803 回答