GSAPがスラッギングされているScrollMagic

Question

スクロールベースのアニメーションにはGSAPとTweenMaxでScrollMagicを使用したいと思います。私は過去にScrollMagicでいくつかの経験をしており、いつもうまく動作します。今回は、アニメーションが非常に遅く、デバッグです。インジケータも同様です。

これは私の例である： 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

変換以外のアニメーションは、常に少しばかげている可能性があります。あなたは 'left'プロパティをアニメーション化するので、これが理由です。それを変換に更新する方がはるかに優れています。

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