Jump to content

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

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" />




<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



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.