Jump to content
Search Community

Help with ScrollTrigger and DrawSVG Performance

superM test
Moderator Tag

Recommended Posts

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

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

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. 

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

 

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...