SVG animation lagging after many tries

[donnierisk]

Hi there,

 

Loving GSAP and worked with it on a few projects! I'm trying to create an intro animation for one of our apps using SVGs. In the past I was able to make it work without lag before, but for the life of me I can't get it to be smooth on a full screen. I've tried animating x/y properties instead of top, etc. The result is the same. It needs to adapt to screensize that's why I use vh for tweening. Does anyone have tips for me please? I've attempted many things that don't seem to work and I'm just worried i'm going at this all wrong maybe...

 

The reason the SVGs are wider than the screen is that there are horizontal movements between different pages on our web app.

PS. should try keep the screen height as big as possible to see the animation properly. 

Regards

See the Pen YzwVrQp by donnierisk (@donnierisk) on CodePen

[ZachSaucier]

Hey donnierisk and welcome to the GreenSock forums.

 

The issue is that your SVG is just not performant to animate. Without making concessions it won't perform better, period. Primarily it's the filters that are making your SVG less performant but you can probably optimize a few other things as well. See this post about how to improve SVG performance.

[donnierisk]

Thanks for the speedy reply i'll look into it. For some reason it performed way better before, but these SVGs were given to me from a designer so i'll have to look into ways of improving them then.