ryanpk Posted December 10, 2021 Share Posted December 10, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted December 10, 2021 Share Posted December 10, 2021 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. 1 Link to comment Share on other sites More sharing options...
ryanpk Posted December 10, 2021 Author Share Posted December 10, 2021 I'll give those a shot. Thanks for the quick response! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now