Fairly simple repeating 'y' animation seems to be significantly impacting performance.

[ryanpk]

Hi all, not new to GSAP (love it) but I typically don't repeat or yoyo my animations and I'm wondering why my computer is chugging so hard from this relatively simple animation — am I missing something or is there a better way to set this up? I tried grouping the spheres into containers to reduce the amount of overall animations but that didn't seem to help (much, at least).

 

const homeMarqueeSpheres = gsap.timeline({ paused: true, yoyo: true, repeat: -1 });

 

homeMarqueeSpheres

  .to('.marquee--home__sphere--one', {duration: 4, y: 60, ease: 'sine.inOut'}, 0)

  .to('.marquee--home__spheres-container--two-four-five-nine', {duration: 4, y: 40, ease: 'sine.inOut'}, 0)

  .to('.marquee--home__spheres-container--three-six', {duration: 4, y: -40, ease: 'sine.inOut'}, 0)

  .to('.marquee--home__spheres-container--seven-eight-ten', {duration: 4, y: -25, ease: 'sine.inOut'}, 0)

See the Pen MWEjOqm by ryanpkoenig (@ryanpkoenig) on CodePen

[OSUblake]

Welcome to the forums @ryanpk

 

GSAP does not do any rendering, so any performance bottlenecks would be due browser rendering, like those those gradients. You can try setting will-change: transform in your CSS, using images, or use a faster renderer like canvas or WebGL.

 

[ryanpk]

I'll give those a shot. Thanks for the quick response!