Search code examples
javascriptjquerygsapscrollmagic

ScrollMagic with GSAP ist lagging

I would like to use ScrollMagic with GSAP and TweenMax for a scroll based animation. I've made some experience with ScrollMagic in the past and it always works fine. This time, the animation is quite slow and the debug.Indicators as well.

This is my example: https://codepen.io/jonasloerken/pen/NvXyWW

This is an foreign example with a smooth animation: https://codepen.io/hdavtian/pen/MKNgzV

I'm using Tween for the animation:

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

Why is my animation so slow and laggy?

Solution

  • Animating by anything other than transform can always be a bit jerky. As you're animating the 'left' property, this is why. Updating it to a transform works much better.

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