Как заставить анимацию Tweenmax работать только с определенным окном просмотра? - PullRequest
Новая
       86

Как заставить анимацию Tweenmax работать только с определенным окном просмотра?

0 голосов
/ 12 июля 2020

Я новичок в tween max, в моем проекте я использую tween max со scroll magi c. его горизонтальная прокрутка и пять разных разделов. поэтому для каждого раздела я добавил разные типы анимации tween max, и эти анимации будут работать только при достижении области просмотра. но теперь все анимации разделов работают, когда я обновляю sh саму страницу. если я перейду к определенному разделу, анимация уже сделана. как это исправить?

Это мой максимальный код подростка: (это только для второго раздела) 

var controller = new ScrollMagic.Controller();
var tl7 = new TimelineMax();
tl7.from("#section02 #title2", 0.5,{y:10, opacity:0, ease: Sine.easeIn});
tl7.from("#section02 #trigger--title2", 0.3,{y:10, opacity:0, ease: Sine.easeIn});
tl7.from("#choose1 span", 0.3,{y:10, opacity:0, ease: Sine.easeIn});

var scene = new ScrollMagic.Scene({
  triggerElement:"#section02",
  triggerHook: "onEnter"
})
.setClassToggle('#section02', 'animate')
.reverse(true)
.setTween(tl7)
.addTo(controller);

My HTML: 

   <div class="wrapper" id="js-wrapper">
    <div class="sections" id="js-slideContainer">
      <section class="section" id="section01">
        <span class="section__title" id="title1">Section One</span>
        <span id="trigger--title1"></span>
      </section>
      <section class="section" id="section02">
        <span class="section__title" id="title2">Section Two</span>
        <span id="trigger--title2">sub</span>
      </section>
      <section class="section" id="section03">
        <span class="section__title" id="title3">Section Three</span>
        <span id="trigger--title3"></span>
      </section>
      <section class="section" id="section04">
        <span class="section__title" id="title4">Section Four</span>
        <span id="trigger--title4"></span>
      </section>
    </div>
  </div>

Для ссылку, я включил URL-адрес Codepen - https://codepen.io/sankarsam/pen/MWKBYwJ

если кто-нибудь знает это, пожалуйста, помогите мне.

...