ScrollMagic與GSAP ist滯後

Question

我想使用ScrollMagic與GSAP和TweenMax爲基於滾動的動畫。我在過去使用過ScrollMagic的一些經驗，並且總是可以正常工作。這一次，動畫非常緩慢，debug.Indicators也是如此。

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

這是一個國外的例子有流暢的動畫效果：https://codepen.io/hdavtian/pen/MKNgzV

我使用吐溫爲動畫：

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); 

爲什麼我的動畫如此緩慢和遲緩？

Answer 1

通過除變換之外的任何其他動畫可以總是有點生澀。當您爲「左」屬性設置動畫時，這就是原因。將它更新爲變換效果會更好。

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