GSAP ThreeJS Workers and offcanvas

[tobe21]

Hi,

 

Im having some issues to make my animation perform better.

 

The history of this project:

 

This animation start as a svg animation, the svg is really complex about 16500 dots on screen moving like a wave, the animation performance is really bad I search in the forum (gsap forum) and some people recommend to make the animation inside of a canvas and use threejs or other webgl api.

 

Now the animations is done by threejs rendering all the dots (16500 mesh) in a variable size canvas, the performance is 10 times better but still really heavy for the main thread (loading time), reading in firefox documentation of js, I found webworkers and searching more a found Offcanvas (like regular canvas but using webworkers) so the main-thread doesn't perform the heavy math for the animation and everything works more smooth.

 

My questions is this one:

 

Before go deeper into this I really need to be sure this is possible, can I animate threejs mesh in a offcanvas with gsap? is this possible? because if is possible I can take out from the mainthread a lot of work and make the website more smooth.

 

I know this question is not 100% gsap related but maybe someone with more experience and knowledge can give a small yes or no.

 

thanks so much

[GreenSock]

GSAP can animate literally anything that JavaScript can touch. Anything. 

 

I must admit that animating 16,500 individual dots seems extremely ambitious. I would not expect that to animate smoothly on most devices no matter how you structure things or what technology you use (unless you just make it a video ). 

[tobe21]

13 hours ago, GreenSock said:

GSAP can animate literally anything that JavaScript can touch. Anything. 

 

I must admit that animating 16,500 individual dots seems extremely ambitious. I would not expect that to animate smoothly on most devices no matter how you structure things or what technology you use (unless you just make it a video ). 

I can't use videos for background in this project, the animations runs perfect, but I have the main-thread overload making the other elements in the site a little laggy, My main concern was if gsap can work with this technology (offcanvas) because this open a big door, I will be able to move part of this heavy load to other threads, thank you for the reply i will start learning offcanvas.

[tobe21]

Just is case somebody had the same question:

 

After 8hs of learning webworkers, I can say yes, works, perfect, the main thread now is light really light and the animation performance is 100x times better, GSAP is insane because from the worker I import my functions and execute all the animations in different threads, all is working perfect but its not working on iphone, for some reason, but the iphones run the old version of my animation (pure gsap and svg) perfectly fine.

 

Thanks, this forum is amazing

[GreenSock]

That's great to hear, @tobe21! 🥳

 

If you've got a minimal demo or anything that'd help people to see how you did it, feel free to post that here. We love it when people in the community share what they learned, strategies, etc.