Question

我正在研究GSAP3，并从中实现了基本代码。我对延迟和错位不适用于滚动魔术感到困惑。

从下面我链接到的代码和codepen中可以看到，其中动画内容具有错位链接，图像带有延迟，但是在第二部分中，滚动魔术延迟和错位没有表现正常。因为它具有与正常时间轴相同的效果。缓动同样如此，不适用于滚动魔术。我是在使用旧的滚动魔术，还是代码错误。请帮帮我。

var $content1 = $('.content1');
var $image1 = $('.image1');
gsap.set($content1, {
  y: -210,
  opacity: 0
});
gsap.set($image1, {
  x: 80,
  opacity: 0
});
gsap.set('.content1 ul li', {
  y: -40,
  opacity: 0
})
var fixedTimeLine = gsap.timeline();

fixedTimeLine
  .to($content1, {
  y: 0,
  opacity: 1
})
  .to('.content1 ul li', {
  y: 0,
  stagger: 0.1,
  opacity: 1
})
  .to($image1, {
  x: 0,
  opacity: 1,
  delay: 1.4
}, "+=1.4"); 

/* scroll magic */
var controller = new ScrollMagic.Controller();

var $content2 = $('.content2');
var $image2 = $('.image2');
gsap.set($content2, {
  y: -210,
  ease: 'power2',
  opacity: 0
  
});
gsap.set($image2, {
  x: 80,
  ease: 'power2',
  opacity: 0
});
gsap.set('.content2 ul li', {
  y: -40,
  ease: 'power2',
  opacity: 0
})

$(".scrollmgc-timeline").each(function() {
  var tl1 = gsap.timeline();
  tl1 
    .to($content2, {
  y: 0,
  opacity: 1
})
  .to('.content2 ul li', {
  y: 0,
  stagger: 0.1,
  opacity: 1
})
  .to($image2, {
  x: 0,
  opacity: 1,
  delay: 1.4
}); 

  var scene = new ScrollMagic.Scene({
    triggerElement: this,
    duration: 20,
    offset: 20,
    triggerHook: 0.55,
  })
  .setTween(tl1)
  .addIndicators()
  .addTo(controller);
});

.container {
  width: 60%;
  margin: 0 auto;
  transition: all 0.4s ease-in-out;
}
.only-timeline,
.scrollmgc-timeline{
  display: flex;
  align-items: center;
  height: 100vh;
}
.content2,
.image2 {
  transition: all 0.4s ease-in-out;
}
.content1 ul,
.content2 ul{
  display: flex;
  list-style: none;
  padding: 0;
}
.content1 ul li,
.content2 ul li{
  margin-right: 20px;
  transition: all 0.4s ease-in-out;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js'></script>
<div class="container">
  <div class="only-timeline">
    <div class="content1">
      Lorem Ipsum dolar Lorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolar Lorem Ipsum dolar Lorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolar Lorem Ipsum dolar Lorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolar
      <ul>
        <li><a href="#">demo</a></li>
        <li><a href="#">demo</a></li>
        <li><a href="#">demo</a></li>
      </ul>
      </div>
    <div class="image1">
      <img src="https://via.placeholder.com/150">
    </div>
  </div>
    <div class="scrollmgc-timeline">
    <div class="content2">
      Lorem Ipsum dolar Lorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolar Lorem Ipsum dolar Lorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolar Lorem Ipsum dolar Lorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolarLorem Ipsum dolar
      <ul>
        <li><a href="#">demo</a></li>
        <li><a href="#">demo</a></li>
        <li><a href="#">demo</a></li>
      </ul>
      </div>
    <div class="image2">
      <img src="https://via.placeholder.com/150">
    </div>
  </div>
</div>

如果要找到关于Scrollmagic的内容，也要加起来我怎么只能在GSAP3中实现它

很抱歉代码段中的错误。

延迟和交错在GSAP3中无法在滚动魔术中工作

0 个答案: