Jump to content
GreenSock

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

Blur filters

Recommended Posts

Massive n00b question,

 

But I just couldn't figure it out.

 

How do I tween a blur filter in GSAP?

 

Thanks in advance!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Ah okay cool, 

 

Makes a lot more sense now!

Link to comment
Share on other sites

  • 1 year later...

Is this still the way to go?

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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+ ) :mrgreen:  ;

 

something like this :

 

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

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

  • 6 months later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

:)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 10 months later...

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

Link to comment
Share on other sites

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

 

:)

Link to comment
Share on other sites

(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)

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