superM

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.

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.

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.

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!