Анимация размытия фильтра с GSAP

Question

Я хочу создать какой-то анимированный эффект уменьшения с помощью GSAP. То, что я пытаюсь сделать, - это масштабирование элемента с удвоенного размера до нормального размера и применение исчезающего 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

Вы пробовали просто обновление до GSAP 1.18.4? Кажется, работает в вашем кодефене. Ссылка CDN на TweenMax 1.18.4 равна 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)'); 
    } 

здесь большой демо сделал Marzullo http://codepen.io/jonathan/pen/ZWOmmg