ScrollMagic + SmoothScroll 口吃答案

【问题标题】：ScrollMagic + SmoothScroll stutteringScrollMagic + SmoothScroll 口吃
【发布时间】：2019-08-27 11:26:09
【问题描述】：

所以我在我的网站上创建了一个平滑的滚动效果，效果很好，但是我遇到了 Scrollmagic 的问题。向下滚动时，我正在翻译元素，但它结结巴巴。很多。当我禁用平滑滚动脚本时，一切正常。

顺便说一句：我正在使用 Webpack 和 GSAP 制作动画。

我的猜测是 Scrollmagic 不知道动画，所以它使用的是结束值，而不是当前值。但我不知道如何解决这个问题

这是我的平滑滚动：

import { TweenLite } from 'gsap';

const html = document.documentElement;
const body = document.body;

const scroller = {
  target: document.querySelector('.scroll-container'),
  ease: 0.1, // <= scroll speed
  endY: 0,
  y: 0,
  resizeRequest: 1,
  scrollRequest: 0,
};

let requestId = null;

TweenLite.set(scroller.target, {
  rotation: 0.01,
  force3D: true,
});
window.addEventListener('load', onLoad);

function onLoad() {
  updateScroller();
  window.focus();
  window.addEventListener('resize', onResize);
  document.addEventListener('scroll', onScroll);
}

function updateScroller() {
  const resized = scroller.resizeRequest > 0;

  if (resized) {
    const height = scroller.target.clientHeight;
    body.style.height = `${height}px`;
    scroller.resizeRequest = 0;
  }

  const scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

  scroller.endY = scrollY;
  scroller.y += (scrollY - scroller.y) * scroller.ease;

  if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
    scroller.y = scrollY;
    scroller.scrollRequest = 0;
  }

  TweenLite.set(scroller.target, {
    y: -scroller.y,
  });

  requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
}

function onScroll() {
  scroller.scrollRequest += 1;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

function onResize() {
  scroller.resizeRequest += 1;
  if (!requestId) {
    requestId = requestAnimationFrame(updateScroller);
  }
}

还有 Scrollmagic 部分：

import $ from 'jquery';
import * as ScrollMagic from 'scrollmagic';
import { TweenMax, TimelineMax, Power0 } from 'gsap';
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap';

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);

const controller = new ScrollMagic.Controller();

$('.big-outline-text').each(function() {
  const tl = new TimelineMax();
  const child = $(this);

  if ($(this).hasClass('right-to-left')) {
    tl.to(child, 2, { x: -300, ease: Power0.easeInOut });
  } else if ($(this).hasClass('left-to-right')) {
    tl.fromTo(child, 2, { x: -300 }, { x: 0, ease: Power0.easeInOut }, '+=1');
  }

  const scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.9,
    duration: '110%',
  })
    .setTween(tl)
    .addTo(controller);
});

$('.bottom-to-top').each(function() {
  const tl2 = new TimelineMax();
  const child = $(this);

  if ($(this).hasClass('bottom-to-top')) {
    tl2.fromTo(child, 2, { y: -300 }, { y: 100, ease: Power0.easeInOut });
  }

  const scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.9,
    duration: '220%',
  })
    .setTween(tl2)
    .addTo(controller);
});

我确定我不是第一个遇到这个问题的人，但我找不到任何答案。

【问题讨论】：

嘿 Perdixo。我建议查看 GreenSock 的 article on working with ScrollMagic 中的示例，然后修改这些演示以满足您的需求。此外，您更有可能在the GSAP forums 上获得更快的回复。但是，最好有一个关于您的问题的最小示例，以便将其放在 StackBlitz 或其他内容中会很好。

标签： javascript scroll smooth-scrolling gsap scrollmagic

【解决方案1】：

我设法通过滚动条的刷新功能解决了我的问题。就像在这个codepen中一样https://codepen.io/emraher/pen/GPRJEZ?editors=1010

他们将滚动条和scrollmagic场景设置为vars，然后是这个小宝石

var elem = document.querySelector(".content");
var scrollbar = Scrollbar.init(elem)

scrollbar.addListener(() => {
scene.refresh()
 })

【讨论】：