Задержка и пошатывание не работают в волнах прокрутки c с GSAP3 - PullRequest
Новая
       42

Задержка и пошатывание не работают в волнах прокрутки c с GSAP3

0 голосов
/ 20 апреля 2020

Я работал над GSAP3 и реализовал базовый c код из него. Я немного запутался с задержкой и неуместностью работы прокрутки с магией прокрутки c.

Как видно из кода, который я привел ниже, и codepen , где контент с анимацией имеет ссылки с пошаговым режимом и изображением приходят с задержкой, но во втором разделе с волнами прокрутки c задержка и смещение не ведут себя нормально. Как это имеет те же эффекты, что и обычные сроки. То же самое относится и к замедлению, оно не работает с волнами прокрутки c. Я использую старую магию прокрутки c или это неправильный код. Пожалуйста, помогите мне. 

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>

Также, чтобы сложить это, вот что, если найти о Scrollmagi c Как я могу добиться этого только в GSAP3

Извините за ошибку во фрагменте.

...