Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
defransekamer

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

Recommended Posts

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

Link to comment
Share on other sites

'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!

  • Like 2
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.
×