Анимация TweenMax при прокрутке - PullRequest
Новая
       13

Анимация TweenMax при прокрутке

0 голосов
/ 01 декабря 2018

Я новичок в JavaScript и застрял в событиях прокрутки с помощью библиотеки анимации TweenMax.

Я хочу анимировать элементы прокрутки, как обычное событие прокрутки, но оно не работает должным образом.

1-я анимация (tl) - это анимация печати, но анимация снова и снова запускается с самого начала при прокрутке вниз.(Я хочу, чтобы он анимировался только один раз)

2-я анимация (tl2) не появляется при прокрутке, я имею в виду, она не появляется при прокрутке, но каким-то образом это происходит при обновлении страницы.

Что не так с этим кодом и как эти элементы правильно анимируются при прокрутке?

Или вам известны примеры использования библиотеки TweenMax при прокрутке? 

$(window).scroll(function() {

  var scrollTop = $(window).scrollTop();
  var winH = $(window).height();
  var pos1 = $('#q1').offset().top;
  var pos2 = $('.pics').offset().top;

  if (scrollTop > pos1 - winH / 2) {
    $(function() {
      var tl = new TimelineMax({
        paused: true,
      });

      tl.fromTo("#q1.anim-typewriter", 4, {
        width: "0",
      }, {
        width: "100%",
        ease: SteppedEase.config(37)
      }, 0);

      tl.play();
    });

    if (scrollTop > pos2 - winH / 2) {
      var tl2 = new TimelineLite();

      tl2.from("#pic3", 0.8, {
        autoAlpha: 0,
        y: -50
      }, 0.2);
      tl2.from("#pic4", 0.8, {
        autoAlpha: 0,
        y: -50
      }, "+=0.2");
      tl2.from("#pic5", 0.8, {
        autoAlpha: 0,
        y: -50
      }, "+=0.2");

      var tl3 = new TimelineMax({
        paused: true
      });

      tl3.fromTo("#q2.anim-typewriter", 3, {
        width: "0",
      }, {
        width: "100%",
        ease: SteppedEase.config(37)
      }, 0);
    };
  };
});
...