Lag on large image in CSV

[Guy Lescalier]

Hello,

 

I need to animate an SVG viewport in order to navigate inside an image which is rather large (4096x2304) and I experience a lag halfway through the animation the first time it's triggered.

I tried some tricks found on this forum like :

tl.progress(1).progress(0);

tl.restart();

But nothing seems to work...

It appears the size of the image is the origin of the problem.

As anyone encountered the same issue and found a workaround ?

 

Thanks !

See the Pen LYRVNaj by GuyLescalier (@GuyLescalier) on CodePen

[ZachSaucier]

Hey Guy and welcome to the GreenSock forums.

 

You can see clearly in your demo that the issue isn't with GSAP - it's simply a rendering limit. On my computer your animation works fine. You maybe a longer delay before the animation fires would help?

 

We also recommend using the GSAP 3 formatting: 

 

[GreenSock]

I believe that various browsers have rendering strategies for larger graphics that essentially break them up into chunks when you go beyond a certain size. For example, once something goes beyond 2000px the browser may bust it up into tiles to try to manage it better. My guess is that's why you're seeing a delay in the middle of your animation - perhaps it's the browser going "uh oh...that thing is getting really big...I better break it apart internally into 4 chunks instead...so I'll need to re-upload that to the GPU..." (or something along those lines). Totally unrelated to GSAP. You could experiment with breaking your graphics up so that they don't force the browser to deal with such large amounts of pixels at a given time.