Question

我是JavaScript的初学者，并且使用TweenMax动画库陷入了滚动事件。

我想像普通滚动事件一样对滚动中的元素进行动画处理，但是它没有按预期工作。

第一个动画（tl）是一种键入动画，但是随着向下滚动，动画从头开始一次又一次地重新开始。（我只希望它动画一次）

第二个动画（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);
    };
  };
});

滚动上的TweenMax动画

0 个答案: