Blur filters

[joe_midi 251 Likes (Leader)]

Massive n00b question,

 

But I just couldn't figure it out.

 

How do I tween a blur filter in GSAP?

 

Thanks in advance!

[Rodrigo 5,098 Likes (Superhero)]

Hi,

 

There is no direct way to apply blur filter, the workaround is to create an object with a value 0, then tween that value and through an onUpdate call pass that to the element's css:

var blurElement = {a:0};//start the blur at 0 pixels

//here you can change the value of a to anything you need
TweenLite.to(blurElement, 1, {a:10});

//here you pass the filter to the DOM element
function applyBlur()
{
    TweenLite.set(element, {webkitFilter:"blur(" + element.blur + "px)"});	
}

Hope this helps,

Rodrigo.

[joe_midi 251 Likes (Leader)]

Hey Rodrigo, 

 

Thanks for your quick reply.

 

I tried out your code, but it seems that I'm missing something. (It's probably something _really_ obvious, but I can't see it). 

 

I created a codepen of it here: http://cdpn.io/omsrL

 

If you could show me a little more, that would be great.

[Chrysto 143 Likes (Specialist)]

Hi,

 

Have you tried to use KineticJS? There's tutorial on blurring on http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-blur-filter-tutorial/ . Then you can use GSAP KineticPlugin to tween the filterRadius and redraw the tween onUpdate() method. I'm unable to make you pen now, but should be something like this:
 

TweenLite.to(darth, 5, {kinetic:{filterRadius:0}, ease:Power3.easeOut, onUpdate:drawLayer});
function drawLayer() {
    layer.batchDraw();
}

 

 

 

Update: here is demo: http://cloud.bassta.bg/kinetikjs.html

Source attached: http://cloud.bassta.bg/kinetikjs.zip

[Rodrigo 5,098 Likes (Superhero)]

Hi

I agree with Chrysto, you should check kinetics.

Also there's a problem with your code, The function to apply the blur should be called from an onUpdate callback inside the TweenMax instance:

TweenMax.to(blurElement, 1, {a:20, onUpdate:applyBlur});

//here you pass the filter to the DOM element
function applyBlur()
{
    TweenMax.set($('#box'), {webkitFilter:"blur(" +element.blur + "px)"});
};

Hope this helps

Rodrigo

[joe_midi 251 Likes (Leader)]

Ah okay cool, 

 

Makes a lot more sense now!

[LilaQ 6 Likes (Newbie)]

Is this still the way to go?

 

Or is there an improved way to tween a filter like the blur filter?

[Michael71 59 Likes (Contributor)]

For non-canvas and only webkit based browsers you could try these properties:

-webkit-filter: blur(5px);
filter: blur(5px);

But not all browsers support filter property yet.

[Rodrigo 5,098 Likes (Superhero)]

Hi,

 

As far as I know yes. The new addition could be PixiJS, a WebGL rendering engine with canvas fallback. It has a full set of filters to work with, check it here:

 

http://www.pixijs.com/

 

Check examples 15 (a, b and c):

 

http://www.pixijs.com/examples/

 

Another possibility is use SVG but I haven't played with them in order to know how GSAP can be used with those.

[Carl 11,117 Likes (Superhero)]

regarding svg, take a peak at this demo to see how the AttrPlugin (attribute plugin) can be used to animate blur: http://codepen.io/GreenSock/pen/gpDrC

[Diaco 1,995 Likes (Superhero)]

Hi guys

 

you can try this way too ; personally i`m using StackBlur ( a light weight and  fast almost Gaussian Blur For Canvas ) , have a really nice result and works even in stupid IE ( ie9+ )   ;

 

something like this :

 

See the Pen GgZYEX by MAW (@MAW) on CodePen

[Maelfyn 41 Likes (Newbie)]

Using easelJS you could use a looping interval on a function like this one:

function blur(e, blurAmount){
        var blurFilter = new createjs.BlurFilter(blurAmount, blurAmount, 1);
        e.filters = [blurFilter];
        var bounds = blurFilter.getBounds();
        e.cache(
            e.x + bounds.x,
            e.y + bounds.y,
            e.image.width + bounds.width,
            e.image.height + bounds.height
        );
}

Note that blurring operations can create a lot of strain. I saw it work best in Opera, Chrome, and Firefox (best in my experience). I disabled it for other browsers and entirely on mobile because real-time blurring wasn't fast enough on some larger images (1000x600). I also only did a single blur operation at a time to help avoid noticeable hiccups.

[tizenketto 3 Likes (Newbie)]

I did this based on another post I saw here.

 

See the Pen OPGepQ by tizenketto (@tizenketto) on CodePen

//blur
function blurt(tl, start, end ){
	var tlp = (tl.progress()*100) >> 0;
	if (start < end){
			var inc = start + Math.abs(start - end)/100 * tlp; 
		}else {
			var inc = start - Math.abs(start - end)/100 * tlp; 
		}
	TweenMax.set(tl.target,{'-webkit-filter':'blur('+(inc)+'px)', 'filter':'blur('+(inc)+'px)'});
	}
});

Just call the function onUpdate with parameters onUpdateParams: ["{self}", starting blur, ending blur]  so onUpdateParams: ["{self}", 0, 4] this blurs from 0px to 4px. 

 

So in the sample the text transforms and blurs in and out with the duration of the tween.

 

I will do this with other css filters.

[dj_coder 0 Likes (Newbie)]

regarding svg, take a peak at this demo to see how the AttrPlugin (attribute plugin) can be used to animate blur: 

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

 

I'm new to using code pen so I'm missing something. I copied the code from that link to a file but it doesn't run. I copied html to inside the body tag, css to a style tag, js to a script tag. I get a black box, four buttons and no animation. What am I missing?

[ohem 334 Likes (Leader)]

I'm new to using code pen so I'm missing something. I copied the code from that link to a file but it doesn't run. I copied html to inside the body tag, css to a style tag, js to a script tag. I get a black box, four buttons and no animation. What am I missing?

Try clicking "export" from the bottom of the page on Codepen.

[dj_coder 0 Likes (Newbie)]

Try clicking "export" from the bottom of the page on Codepen.

 

Thanks! That worked, though the blur did not work in FF, only Chrome. I assume its the svg part, since I tried another code sample with the same problem (

See the Pen omsrL by joemidi (@joemidi) on CodePen

). It blurred several objects and two svg elements did not show in FF.

[OSUblake 18,477 Likes (Superhero)]

Check out this post...

http://greensock.com/forums/topic/9185-tween-css-filter-attribute/?p=51736

[Jonathan 5,389 Likes (Superhero)]

This codepen example uses SVG Gaussian Blur filter and it is cross-browser. It uses the GSAP AttrPlugin:

 

See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

 

Full mode in codepen:

 

See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

 

Example above SVG Filter: Gaussian Blur - Cross Browser (Firefox, Chrome, Safari & IE10+)

 

SVG Filters browser support: http://caniuse.com/#feat=svg-filters

 

CSS blur filters are not widely supported yet.

 

Otherwise you would have to use Canvas. To export your image in canvas using drawImage and then blur with Canvas. And then export as a base64 image url.

 

But the SVG filter is easier and DOM based.

 

[bigmamainthemud 7 Likes (Newbie)]

Not seeing this work in Safari. Anyone else w that issue?

[sorciereus 8 Likes (Newbie)]

Hi. Old thread but needing help here. I used this code pen to apply a blur to image. Works great except it's only working on Chrome and Safari and not Firefox. Help?

 

http://cdpn.io/omsrL

[Jonathan 5,389 Likes (Superhero)]

I see this working on Firefox for Windows 7 and 10.

 

Your better off using SVG Gaussian Blur instead, which is supported more than CSS Filter Blur()

 

See the Pen pjOKxo by jonathan (@jonathan) on CodePen

 

[Guest Vic_]

(I have nothing to add here other than I have read all code linked here, took an hour and I learned a lot. thank you all in this thread for education and sharing and showing of your works)

[ZachSaucier 7,133 Likes (Superhero)]

There's now an example blur plugin for GSAP 3! 

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