Choppy animation on scroll

[ferriss]

Hi,

 

I have bound a function to scroll. When the page has quite a lot of videos on the page or a few lottie SVG animations, the scroll animation is a bit choppy and isn't smooth. On an empty page it seems to function ok, so this tells me it's not a wrong value in the code. Any thoughts or ways to debug the scroll optimisation?

 

I've got a calculation that returns a percentage, with that percentage I then animate the height of an element.

 

var el = new TimelineLite({ paused: true });

el.to( $('.el'), {
    ease: Power0.easeNone,
    height: 134
})

 

[...]

 

var progress = perc * -1 + 1;

el.progress( progress );

 

 

Where the [...] there are more calculations, but I do not think they are relevant here.

 

You can see the progress being outputted in the console and this should smoothly animate? But the video shows when you scroll quick, it's jittery and if you scroll very slow it's ok. On pages with just plain text, you can scroll quick and it keeps up.

 

Thanks

 

 

[ZachSaucier]

Hey ferriss and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member! 

 

5 hours ago, ferriss said:

When the page has quite a lot of videos on the page or a few lottie SVG animations, the scroll animation is a bit choppy and isn't smooth. On an empty page it seems to function ok, so this tells me it's not a wrong value in the code. Any thoughts or ways to debug the scroll optimisation?

Lottie is definitely not the most performant way of animating things in general. Usually you can get better performance by animating by hand. But without seeing the actual animations themselves it's hard for us to give other advice. Try to limit the amount of animations happening at any give time and try to only animate properties that are performant to animate. 

 

6 hours ago, ferriss said:

var el = new TimelineLite({ paused: true });

el.to( $('.el'), {
    ease: Power0.easeNone,
    height: 134
})

Several things to change here:

• We highly recommend the GSAP 3 syntax. It's sleeker and this old syntax may not work in the distant future.
• There's no need to use jQuery to select your elements, just pass in the selector string as the target.
• You're using the old ease formatting. We highly recommend the more condensed string form of eases.
• Animating height is not a performant thing to do. We recommend using an alternative way of animating, such as animating the scaleY if possible, using translations, or something like that instead.

Here's how I'd write the same thing though:

var tl = gsap.timeline({ paused: true })
  .to('.el', {
    ease: 'none',
    height: 134
  })

For more info see the most common GSAP mistakes and the GSAP 3 migration guide.

 

It's really hard for us to help any further at this point given the lack of information. Please make a minimal demo if you'd like us to continue helping: