Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kristjan

Timeline freeze page on load for 5 seconds

Recommended Posts

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

Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

 

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×