Jump to content

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

How to apply blur filter to an animation and return to original state

Recommended Posts


Recently I am learning to use the GreenSock libraries and now I'm doing the animation of photographs column when clicking on a button that scrolls down.

Apply a blur filter to give it a blur on the Y axis and I can not make this return to the original state, I mean, that would slowly diminishes blur filter and stops.


I'm using TweenMax to animate with As3, the following piece of code is the one I use to make the animation, and the blur does stop abruptly and do not slowly returning to their original state.


I hope I can help. thanks


TweenMax.to(column, 2 {y:column.y ease:Quart.easeInOut, blurFilter:{blurX:0, blurY:20, remove:true}});


Link to comment
Share on other sites

The SlowMo ease will allow you to introduce the blur and remove it smoothly in a single tween.

You basically want an effect opposite to what is shown here:

http://www.snorkl.tv/2012/04/slowmo-ease-with-yoyomode/ where the blur gets removed and then comes back.



TweenMax.to(column, 2 {blurFilter:{blurX:0, blurY:20}, ease:SlowMo.ease.config(.7, .7, true)});

note this should be a tween separate from the one that moves the y position.


learn more about fine-tuning SlowMo ease here: http://www.snorkl.tv/2012/03/introducing-the-slowmo-ease-in-greensock-animation-platform-v12/

Link to comment
Share on other sites

Thanks Carl, 


I'm still learning how the library works, and thanks for suggesting SlowMo looks great, investigare how to use it.
Although not achieving progressive blur effect
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.