motion blur with svg gaussianblur (tween only the x value)

[defransekamer]

I would like to add some motion blur  on a div with SVG filter

 

for example:

<feGaussianBlur id="hue1feGaussianBlur" in="SourceGraphic" stdDeviation="0 0" />

 

to

 

<feGaussianBlur id="hue1feGaussianBlur" in="SourceGraphic" stdDeviation="30 0" />

 

But how do i tween only the first value of the stdDeviation?

 

i would guess it should bes something like this, but i get an error:

tl.to("#hue1feGaussianBlur", .3, {attr: {stdDeviation: "30 0"}},0);

 

See the Pen zXWBMZ by roderickrey (@roderickrey) on CodePen

[Dipscom]

'Ullo!

 

A long time ago I made this test:

 

See the Pen yJQgVO by dipscom (@dipscom) on CodePen

 

It uses an older version of GSAP but it should show you one way of achieving it.

 

Happy Tweening!

[Yaya]

@Dipscom,  I was looking for gsap blur and ran across this thread. Your advice lives on..... to help others like me! Thank you.

@defransekamer, I am glad you asked the question.


 

[ZachSaucier]

@Yaya You might be interested in the unofficial blur plugin. It doesn't use SVG blur, just the CSS blur filter:

See the Pen NWKjEBG by GreenSock (@GreenSock) on CodePen

[Yaya]

@ZachSaucier That's fabulous! It looks easy enough to implement quickly. Is the "filter" supported on most modern browsers these days?

[ZachSaucier]

2 minutes ago, Yaya said:

Is the "filter" supported on most modern browsers these days?

https://caniuse.com/#feat=css-filters

[OSUblake]

12 hours ago, ZachSaucier said:

You might be interested in the unofficial blur plugin. It doesn't use SVG blur, just the CSS blur filter:

 

There's no need for a plugin.

 

See the Pen da31f02cd85acb36eb91d0480afc3a73 by osublake (@osublake) on CodePen

 

 

 

 

[OSUblake]

Also, updated an old pen that some might find useful. The x and y axis are independent.

 

See the Pen WZqBjV by osublake (@osublake) on CodePen

 

 

[GreenSock]

4 hours ago, OSUblake said:

There's no need for a plugin.

The plugin delivered some extra benefits: 

• The ability to gsap.getProperty(target, "blur")
• It'd work even if the filter has other values in it (not blur)