Timeline freeze page on load for 5 seconds

[Kristjan]

Hello

 

I have debugged the problem to occour when I add TimelineLite. On page load the whole page stutters for five seconds, time is consistent on every load. While its stuttering no other items are loading in and even page scroll is stuck. Total freeze. When stutter ends the timeline animation starts. What can cause suck stutter?

gsap version 2.1.2, jquery version 3.3.1

[Carl]

Very hard to tell without seeing this. Only under the rarest of circumstances where perhaps 10s of thousands of tweens are initiating at once would I suspect even a few milliseconds of interruption. 5 seconds is an incredibly long amount of time and I can't imagine how loading TimelineLite would cause that type of impact. I'm curious where you are loading TimelineLite from and why you are choosing to load it separately instead of just loading TweenMax.

 

Are you loading GSAP files from a cdn or your own server?

 

Again, without a demo or link to your site its impossible to know for sure and it will take way too long to try to guess.

 

 

[Kristjan]

GSAP is loded from a cdn. I got permission to out up a demo site. http://steven.punkdigital.ee/e-ehitus/html/

 

I am using TimelineLite in conjunction with drawsvg. If there is some other way to define the drawsvg it would help alot.

[Carl]

Thanks for the link. Very helpful.

The issue is not at all related to the fact that you are loading TimelineLite on a page. 

The problem has to do with the fact that you are animating 4734 lines in an SVG and DrawSVG has to measure every single line and manipulate its stroke-dashoffset.

 

I suspect the added time has more to do with the browser's reading and writing of values and not so much DrawSVG's computational time. 

Regardless, I would suggest you try a test with a much simpler svg just to make sure this is exactly where the problem is. 

 

[Kristjan]

Is there an alternative and more lightweight code to get similar results to drawsvg animation?

[Dipscom]

Probably would be you drawing the lines in Canvas but not using DrawSVG, actually writing out the line commands and have them animated.

[explorerzip]

You could also reproduce this in After Effects and output to MP4. An animated GIF might also work since there are very few colours in your illustration. Then make the GIF / MP4 as the background image.