带有 GSAP 的 ScrollMagic 滞后答案

【问题标题】：ScrollMagic with GSAP ist lagging带有 GSAP 的 ScrollMagic 滞后
【发布时间】：2017-08-17 11:12:50
【问题描述】：

我想将 ScrollMagic 与 GSAP 和 TweenMax 一起用于基于滚动的动画。过去我对 ScrollMagic 有过一些经验，它总是可以正常工作。这一次，动画很慢，debug.Indicators 也很慢。

这是我的例子： https://codepen.io/jonasloerken/pen/NvXyWW

这是一个国外例子，动画流畅：https://codepen.io/hdavtian/pen/MKNgzV

我正在为动画使用 Tween：

var controller = new ScrollMagic.Controller();

var scene1 = new ScrollMagic.Scene({
    triggerElement: '.header-section',
    duration: "100%",
    triggerHook: 0, // don't trigger until #block hits the top of the viewport
    reverse: true
})
.setTween('.header-section .background-text', {left: '10px'})
.addIndicators()
.addTo(controller);

为什么我的动画如此缓慢和滞后？

【问题讨论】：

标签： javascript jquery gsap scrollmagic

【解决方案1】：

除了变换之外的任何动画总是有点生涩。当您为“左”属性设置动画时，这就是原因。将其更新为转换效果会更好。

.setTween('.header-section .background-text', {x: '-50%'})

【讨论】：