javascript - 使用 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？似乎在您的代码笔中工作。 TweenMax 1.18.4 的 CDN 链接是 https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js