Animieren Blur-Filter mit GSAP

Question

Ich möchte eine Art Zoom Out animierten Effekt mit GSAP erstellen. Was ich versuche, ist ein Element von der doppelten Größe auf die normale Größe zu skalieren und einen verschwindenden blur filter anzuwenden. Der Filter sollte bei blur(15px) beginnen und auf blur(0) gehen.

Ich dachte, ich es auf diese Weise tun könnte:

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

Was stattdessen passiert, ist, dass die blur(0) sofort angewendet wird.

Hier ist eine einfache pen zeigt das Problem. Was mache ich falsch?

Answer 1

Haben Sie versucht, nur zu GSAP 1.18.4 Aktualisierung? Scheint in deinem Codepen zu funktionieren. Die CDN-Verbindung zu TweenMax 1.18.4 ist https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js

Answer 2

Sie können nicht wirklich den Unschärfe-Filter animieren, aber Sie können es einstellen. Sie können im Grunde eine Zeitleiste einrichten und den Verlauf der Zeitleiste als Methode verwenden, um den Filter über die Dauer der Zeitleiste zu setzen. unten ist Update-Funktion, die die Unschärfe über die Zeitleiste Dauer setzt.

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

hier ist eine große Demo gemacht von Marzullo http://codepen.io/jonathan/pen/ZWOmmg