superM Posted June 26, 2021 Share Posted June 26, 2021 Hi! I'm hoping to get some help with optimizing GSAP animations, because I’m having performance issues. It works as expected, but it feels laggy and slow. On MacOS, I've tested it on browsers: Chrome, FireFox, Edge, and Safari (Safari had the worst performance for me, strangely the client had Chrome as worst). Apologies for this long post, I just can’t seem to improve the performance enough! I’ve used the wonderful ScrollTrigger/GSAP plugins on previous projects and had no performance issues, so I feel like it’s the particular assets used in this webpage...maybe. The page is just HTML, CSS, vanilla JS, and the GSAP plugins: ScrollTrigger and DrawSVG From the top of the page, as the user scrolls down, 4 lines are animated going down the page until towards the bottom of the page, it stops upon reaching another element. As the user scrolls down, other elements are also animated in (slide-in, fade-in). The 4 lines are being animated by drawing the SVG stroke using masks(DrawSVG). What complicated this project was that these particular lines heavily use gradients, and even embedded rasterized images. The source file is an Illustrator file. I did manage to use SVGOMG to remove the embedded rasterized images to reduce the overall file size and maintain the overall gradients look. The other graphics on the page also use gradients for shadow effects. Unfortunately the page is gradients galore! I warned my client that having so much could affect performance, but they are insistent on keeping the gradients. The page’s DOM size is 685 elements, but Google Lighthouse didn't deem it as an “excessive DOM size”. What I've done to help improve performance: Overall page optimization Page size: 613.0 KB Google Lighthouse: Performance Score: 92 Speed Index: 1.6 s Time to Interactive: 1.1 s First Contentful Paint: 0.9 Total Blocking Time: 140 ms Cumulative Layout Shift: 0 Used SVGOMG and separated out layers from the original SVG file - got it down from 400+kb to 36kb For elements that slide in, I used x values that were just enough so that it’s only animated on screen. Used JPG/PNG files for the colored gradient background. Attempted to change the masks to use Clip-path instead (but it stopped working.. Please see below) Questions: What else can I do to help the animations run more smoothly? Would it help to have a loading screen that prevents the user from scrolling until all of the page elements are done loading? Currently I just use document.addEventListener("DOMContentLoaded" ) Would it help to break the long SVG lines into sections, rather than just one very long SVG image? Would it help to use Clippath instead of Mask? If so, can I get help with that, because I couldn’t get my attempt to work If I do receive help on converting to Clippath, I'll make a CodePen of my failed attempt For the CodePen, I tried to simplify the page (also uses a simplified version of the SVG lines). The lagginess isn’t very apparent in this CodePen, I’m guessing because it doesn’t have the actual images and original SVG code. Any help is appreciated, thank you! See the Pen rNmBByR by coderchally (@coderchally) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted June 26, 2021 Share Posted June 26, 2021 Hi superM! Performance ultimately comes down to graphics rendering and how complicated it is for browser to render those changes. You seem to be focusing on load times, which isn't going to make anything animate better. And giving performance advice is really difficult because every case is unique. A lot of times it's just trial and error figuring out what works best. I can tell you that SVG can be notoriously slow, and gradients slow that down even more. If possible, you need to get rid of them, or switch to something that can render them faster, like WebGL. 23 minutes ago, superM said: Would it help to have a loading screen that prevents the user from scrolling until all of the page elements are done loading? Maybe if by "loading" you mean images. It takes CPU power to decompress and display an image. 23 minutes ago, superM said: Would it help to break the long SVG lines into sections, rather than just one very long SVG image? Possibly, but it might be hard to make look seamless. Even better if you can hide stuff that isn't visible. 23 minutes ago, superM said: Would it help to use Clippath instead of Mask? If so, can I get help with that, because I couldn’t get my attempt to work Unlikely. The best option would be to not use either one. Link to comment Share on other sites More sharing options...
superM Posted June 26, 2021 Author Share Posted June 26, 2021 Thanks OSUblake, for answering my questions and giving me further insight on this(and for being so quick)! I tested my code, with everything removed except for the actual SVG gradient lines code. I see that those 4 SVG lines are the main culprits since even with nothing else on the page the animation still lags so. Oh these beautiful but costly SVG+Gradients! 😭 I will look into using something else to render them faster then, like WebGL. 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 27, 2021 Share Posted June 27, 2021 Clippaths are *slightly* more performant than masks because they're based on geometry rather than alpha values so there's a little less calculation involved! +1 for getting rid of gradients too. Link to comment Share on other sites More sharing options...
Cassie Posted June 27, 2021 Share Posted June 27, 2021 But also, I don't think four stroke animations should need webGL. I do stroke animations with SVG all the time. It's not going to be a big enough issue for performance. If you're looking at 10/20/30 strokes then yeah - but this should be fine. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 27, 2021 Share Posted June 27, 2021 8 hours ago, Cassie said: Clippaths are *slightly* more performant than masks because they're based on geometry rather than alpha values so there's a little less calculation involved! Interesting. I would assume that a geometric calculation would be more complicated than comparing alpha values, but I wasn't sure, so I had to go look at the SVG spec. https://drafts.fxtf.org/css-masking/#ClipPathElement If I'm reading that correctly, it's says the clipPath is treated as mask but without color, so in that sense it would be faster than mask as it doesn't take into account all 4 rgba channels. Not sure if you could really measure that performance difference in real-world applications. 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 27, 2021 Share Posted June 27, 2021 Ah that makes sense! No geometric calculations - but no sense of alpa/opacity either. I've definitely seen a difference when animating elements with a gradient mask applied vs a bog standard clip path. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted June 28, 2021 Share Posted June 28, 2021 I saw the below drawSVG + canvas recently, it seemed interesting though its needs updating to GSAP 3. I wonder if there could be a cleaver helper function like this morphSVG function? Maybe something from this codepen approach could help you in some way superM. See the Pen poeMmqY by cjgammon (@cjgammon) on CodePen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 28, 2021 Share Posted June 28, 2021 Canvas is just SVG on super hard mode. See the Pen dyWyzMe by GreenSock (@GreenSock) on CodePen 1 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted June 28, 2021 Share Posted June 28, 2021 ^ Yeah that one and many more can be found throughout the forum. Link to comment Share on other sites More sharing options...
superM Posted June 28, 2021 Author Share Posted June 28, 2021 Thanks Cassie for your input! It made me take a closer look at the 4 SVG lines code, and turns out it was not just the use of gradients - it had almost 50 extra masks, <filter>, <use>.. which reminded me of the info from https://codepen.io/tigt/post/improving-svg-rendering-performance. I thought when I used SVGOMG it removed references to used images, etc., and I missed those extras. I ended up recreating the SVG lines in the Illustrator file(someone else created the original), to match the original look but only use gradients and no other effects! This drastically helped, and now it is no longer laggy, even with all the other animations/elements added in the page. I also used translateZ(0px) on the div container of the SVG lines. It still has some lagging in Safari though, so I'm trying to work on that now. Maybe I'll try converting the mask use to a clip path instead... Thanks, Shrug- I'll look into that as well, I was wondering about Canvas + DrawSVG. 1 Link to comment Share on other sites More sharing options...
superM Posted June 28, 2021 Author Share Posted June 28, 2021 Just tested on an iPhone 12's Safari browser (landscape), the page is pretty quick! Going to update my Safari desktop browser(and macOS) to the latest to see if that helps. Currently on macOS 10.15.4, with Safari 13.1. Link to comment Share on other sites More sharing options...
Cassie Posted June 29, 2021 Share Posted June 29, 2021 Wooo! Yeah, I thought it was odd that you were having issues with four lines. Nice job! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now