Jump to content


blur effect

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





Link to comment
Share on other sites

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



  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:





  • Like 1
Link to comment
Share on other sites

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



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



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

  • Like 7
Link to comment
Share on other sites

Thank you guys!!!!!!

Fot that super useful advices!

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.