GSAPを使用してぼかしフィルタをアニメーション化する

Question

GSAPを使用してアニメーション効果をいくつか作成します。私がしようとしているのは、要素を2倍のサイズから通常のサイズにスケーリングし、消失することを適用することです。blur filterフィルタはblur(15px)から開始し、blur(0)に下がる必要があります。私はこのようにそれを行うことができると思った

：

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 
}); 

何が起こるが、その代わり、blur(0)がすぐに適用されることをです。

問題を示す単純なpenです。 私は何が間違っていますか？

Answer 1

Marzullo http://codepen.io/jonathan/pen/ZWOmmgによって作られた大きなデモがありますか？あなたのコードブックで働くようです。 TweenMax 1.18.4へのCDNリンクはhttps://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js

Answer 2

ぼかしフィルタを実際にアニメーション化することはできませんが、設定することはできます。基本的には、タイムラインを設定し、タイムラインの進行を使用して、タイムラインの期間にわたってフィルタを設定することができます。 は、タイムラインの期間にわたってぼかしを設定する更新関数です。

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)'); 
    } 

ここであなただけのGSAPの1.18.4に更新しようとしたことがあり