Animate blur filter with GSAP

Question

I want to create some kind of zoom out animated effect using GSAP. What I'm trying to do is scaling an element from double its size to the normal size and apply a vanishing blur filter . The filter should start at blur(15px) and going down to blur(0) .

I thought I could do it this way:

var el = $('img');

TweenLite.set(el, {
  'webkitFilter': 'blur(15px)',
  scale: 2
});
TweenLite.to(el, 0, {
  autoAlpha: 1,
  delay: 1.75,
  ease: Power2.easeIn
}); 
TweenLite.to(el, 2, {
  'webkitFilter': 'blur(0px)',
  scale: 1,
  delay: 1.7,
  ease: Power2.easeIn
});

What happens, instead, is that the blur(0) gets applied immediately.

Here's a simple pen showing the problem. What am I doing wrong?

Answer 1

Have you tried just updating to GSAP 1.18.4? Seems to work in your codepen. The CDN link to TweenMax 1.18.4 is https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js

Answer 2

you can't really animate the blur filter, but you can set it. You can basically set up a timeline and use the progression of the timeline as the method to set the filter over the timeline duration. below is update function that sets the blur over the timeline duration.

  onUpdate:function(tl){
    var tlp = (tl.progress()*40)>>0;
    TweenMax.set('#blur img',{'-webkit-filter':'blur(' + tlp + 'px' + ')','filter':'blur(' + tlp + 'px' + ')'});

      var heading = $('#blur h3');
    heading.text('blur(' + tlp + 'px)');
  }

here is a great demo made by Marzullo http://codepen.io/jonathan/pen/ZWOmmg