ScrollMagic + SmoothScroll 卡顿

Question

所以我在我的网站上创建了一个平滑的滚动效果，效果很好，但我在使用 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);
});

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

Answer 1

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

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

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

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

ScrollMagic + SmoothScroll 卡顿

ScrollMagic + SmoothScroll stuttering

javascript

scroll

smooth-scrolling

gsap

scrollmagic