blur effect

[anusky 1 Likes (Newbie)]

Hi again!

Any basic recomendation for make a blur effect in TimelineLite?

I enclosed a pic for have an idea what i'm talking about...I dont know if thats helps.

 

Thanks in advanced,

 

 

 

[Jonathan 5,389 Likes (Superhero)]

Hello anusky, and Welcome to the GreenSock forum!

 

Here is GSAP animating a SVG Filter Gaussian Blur:

 

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

 

And here is GSAP animating a CSS Filter Blur

 

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

 

[Oliver16Years 208 Likes (Specialist)]

As I know there is no motion blur yet which is cross browser compatible. Check back 1-2 years later. Lol, sorry, kinda frustrating. But if you make a motion blurred and a normal asset in photoshop, and fade in the blurred while moving both assets, You can achieve something similar.

[ohem 334 Likes (Leader)]

SVG filters are pretty well supported across browsers now: http://caniuse.com/#feat=svg-filters

 

But it's true, just blurring the X direction for the appearance of a motion blur would be trickier than just a regular/uniform blur.  I did find this though: http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/

 

Not totally sure how it could be integrated with/converted to GSAP though.

[Jonathan 5,389 Likes (Superhero)]

Yep ohem is right.. SVG filters are more widely supported cross browser. But CSS filters should now work in Chrome and Firefox, but no IE11. MS Edge has partial support excluding the url function:

 

http://caniuse.com/#search=css%20filter

 

[OSUblake 18,472 Likes (Superhero)]

@Ohem, that tutorial you linked to does use GSAP. Lucas Bebber does a lot of cutting edge stuff with GSAP. Here's the demo from that article...

http://tympanus.net/Tutorials/MotionBlurEffect/

 

Here's another tutorial about creating a motion blur effect using GSAP.

http://codepen.io/igcorreia/post/motion-blur-on-the-web

 

And some of his demos

See the Pen pJvOpL by igcorreia (@igcorreia) on CodePen

See the Pen ZGGzWZ by igcorreia (@igcorreia) on CodePen

See the Pen zGGzzZ by igcorreia (@igcorreia) on CodePen

[anusky 1 Likes (Newbie)]

Thank you guys!!!!!!

Fot that super useful advices!