Jump to content
Search Community

Blur filters

joe_midi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

  • 1 year later...

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

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

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

Link to comment
Share on other sites

  • 3 years later...

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