CODEWITHSUNDEEP
javascriptblurgsap
Carlo
Carlo

Reputation: 4148

Animate blur filter with GSAP

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?

Upvotes: 1

Views: 7467

Answers (2)

Jack
Jack

Reputation: 2970

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

Upvotes: 5

Frederick Jaime
Frederick Jaime

Reputation: 169

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

Upvotes: 2

Related Questions