javascript - Animate blur filter with GSAP - Stack Overflow

admin管理员组

文章数量:1394544

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?

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?

• javascript
• blur
• gsap

Share Improve this question Follow asked Apr 26, 2016 at 20:58 CarloCarlo 4,16877 gold badges4949 silver badges7070 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./ajax/libs/gsap/1.18.4/TweenMax.min.js

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

本文标签： javascriptAnimate blur filter with GSAPStack Overflow