ScrollMagic mit GSAP ist verzögert

Question

Ich möchte ScrollMagic mit GSAP und TweenMax für eine scrollbasierte Animation verwenden. Ich habe in der Vergangenheit einige Erfahrungen mit ScrollMagic gemacht und es funktioniert immer gut. Diesmal ist die Animation ziemlich langsam und die Debug.Indicators ebenfalls.

Dies ist mein Beispiel: https://codepen.io/jonasloerken/pen/NvXyWW

Dies ist ein Fremd Beispiel mit einer glatten Animation: https://codepen.io/hdavtian/pen/MKNgzV

I Tween für die Animation mit bin:

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

Warum ist meine Animation so langsam und laggy?

Answer 1

Animieren mit etwas anderem als Transformieren kann immer etwas ruckelnd sein. Da Sie die "linke" Eigenschaft animieren, ist dies der Grund. Das Aktualisieren auf eine Transformation funktioniert viel besser.

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