DrawSVG laggy performance for a simple animation in Safari

[Joshua Harmon]

Hi,

 

I have a SVG which is animated via DrawSVG Plugin.

 

It's a very simple animation with just 3 elements, it seems to be working fine in all browsers except Safari.

 

I tested it on a i7 Retina MacBook Pro and iPad Pro 2018

 

Both of the devices were playing the animation in 10-15 FPS.

 

I have attached the codepen and screen recording in the attachments.

 

Is there anything that can be done about this?

 

Thanks.

 

 

See the Pen vYeyKPP by joshuah46 (@joshuah46) on CodePen

[Cassie]

Hi Joshua!

Safari's increasingly becoming the new internet explorer. It struggles a bit more with animation than Chrome and Firefox. I would usually say if the performance is bad enough you could try using canvas instead, but honestly this really looks fine, not bad enough to faff around with canvas. 

Perf question aside - 

You had a few mentions of alpha in there which isn't a thing, and also visibility - I assume you meant autoAlpha (this changes opacity and visibility)

Adjusted - 

See the Pen rNGWmvB?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

Filters are often TERRIBLE for performance. Like...really bad. I don't think your issue has anything to do with GSAP - it's the filters you're using. I see a gaussian blur in your markup, an invert() filter in your CSS, and some other things I'm not terribly familiar with in markup like feMergeNode, feComposite, feFlood, color-interpolation-filters, etc. 

[PointC]

23 minutes ago, Cassie said:

You had a few mentions of alpha in there which isn't a thing

Just to clarify - alpha is not commonly used but is valid. I don't believe it's in the docs but it's an alias to animate opacity. I think Blake requested that addition.

 

[Cassie]

Oh man I didn't even spot that filter. Bingo.

Thanks Craig! I didn't know alpha was valid syntax. TIL ✨

[Joshua Harmon]

 

Quote

Filters are often TERRIBLE for performance. Like...really bad. I don't think your issue has anything to do with GSAP - it's the filters you're using. I see a gaussian blur in your markup, an invert() filter in your CSS, and some other things I'm not terribly familiar with in markup like feMergeNode, feComposite, feFlood, color-interpolation-filters, etc. 

There's only one filter in the whole animation and it's invert() it just changes the color from black to white for the stick man figure PNG.

 

You can remove it. It makes no difference.

 

I don't know where you're seeing gaussian blur

[GreenSock]

7 minutes ago, Joshua Harmon said:

I don't know where you're seeing gaussian blur

<filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
  <feGaussianBlur stdDeviation="5" result="coloredBlur" />
    <feOffset dx="0" dy="20" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.123"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
  <feMergeNode />
  <feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>

And elsewhere in your markup:

<g id="uiGroup" filter="url(#glow)" style="transform: translateY(28px);">

Notice that filter="url(#glow)"

[GreenSock]

10 minutes ago, Joshua Harmon said:

There's only one filter in the whole animation and it's invert() it just changes the color from black to white for the stick man figure PNG.

I know, and you'd think that'd be simple enough, right? But I'd strongly encourage you to just remove it for testing to see if it makes a difference. Remember, filters require the browser to do extra work on all those pixels on every single tick (60 times per second). Some browsers are optimized with their filter algorithms, some aren't. 

 

On my computer, it runs totally fine in Safari but I'm on an M1. 🤷‍♂️

[Joshua Harmon]

11 minutes ago, GreenSock said:

<filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
  <feGaussianBlur stdDeviation="5" result="coloredBlur" />
    <feOffset dx="0" dy="20" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.123"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
  <feMergeNode />
  <feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>

And elsewhere in your markup:

<g id="uiGroup" filter="url(#glow)" style="transform: translateY(28px);">

Notice that filter="url(#glow)"

 

 

Huh, interesting I never really looked into the SVG. It's a fork of this.

 

 

I didn't know SVGs had special markup for effects. I commented out the Fe stuff it works fine now on my MacBook and iPad Pro

 

I apologize for the mistake this is on me.

 

[GreenSock]

1 hour ago, Joshua Harmon said:

I didn't know SVGs had special markup for effects. I commented out the Fe stuff it works fine now on my MacBook and iPad Pro

 

I apologize for the mistake this is on me.

 

No worries. Glad you got it working okay. 🎉