GSAP freezes when javascript executes long running tasks

[bb_nic]

Hello, I'm a very new user of gsap.

I'm trying to make an animation on my website's loading screen,  in order to cover up the heavy and long running calculations I need to do before showing the page.

But for a couple of seconds the gsap animation just freezes.

 

My js cannot be split up in small chunks of code and I cannot put it in a web worker, so:

Is there a way to run the gsap animation nice and smooth while doing heavy cpu bound calculations?

 

Thank you  very much!

[Cassie]

Hey @bb_nic

mmm. Tricky. Doing more JS to try and cover up lag from a bunch of JS calculations sounds like a less than ideal approach.

This is why animated loading gifs were used back in the day 😬 I would personally try to either offload or delay some of the initial calculations or animate with CSS in this case.
 

[GreenSock]

4 hours ago, Cassie said:

I would personally try to either offload or delay some of the initial calculations or animate with CSS in this case.

Just beware that even if you use CSS instead, that won't help unless you ONLY animate transforms and/or opacity. Any other properties are bound to the main thread updates, so if you're locking the main thread due to your very heavy JS calculations, it won't be able to repaint the screen with animation updates. 

[Cassie]

Jack dropping the knowledge bombs 💣