Morph SVG run low fps when combining with scroll trigger.

[huylevuanh]

Currently, i am using animate tag to change the path value. Same with morphSVG when combining with scroll trigger and pinned container, SVG is so laggy and very hard to scroll. Is it performance issue, please give me some solutions, Thank a lot.

See the Pen qBgYRvw by wcjyvbgp-the-flexboxer (@wcjyvbgp-the-flexboxer) on CodePen.

[Cassie]

Hi there, I noticed you have a few very performance intensive things in this demo

 

• Morphing is very performance intensive as it's changing the geometry of the shape and doing complex calculations
• Filters are very expensive for a browser to render
• A large area of change - Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
• Infinite animation - you could probably get away with morphing a huge shape with a filter on *IF* your animation was short in duration, but you're animating infinitely which isn't giving the browser a break at all! You're asking a lot here and SVG is probably not the right route for this sort of animation.

Most effects that look like this on websites are made using shaders, which is a very deep subject to delve into - but ultimately much better for performance.

SVG is great for short/small/simple animations.

Hope this helped and sorry there isn't a magic bullet!

[huylevuanh]

Thank you for reply