quickSetter() for filter: blur ?

[trych 11 Likes (Newbie)]

Hi there!
I'm pretty much trying to replicate the linked CodePen from the ScrollTrigger demos, only I want to use filter: blur() instead of skew. Since this has a more complex syntax, is it even possible to use with quickSetter? If so, how?

Thanks!

trych

See the Pen eYpGLYL by GreenSock (@GreenSock) on CodePen

[OSUblake 18,534 Likes (Superhero)]

28 minutes ago, trych said:

Since this has a more complex syntax, is it even possible to use with quickSetter? If so, how?

 

Just like you would normally.

let filterSetter = gsap.quickSetter(".foo", "filter");

...

filterSetter("blur(5px)");

 

Just use caution with convolution filters (filters that do blurring) as they can slow stuff down. It might help to add will-change to your CSS.

.foo {
  will-change: filter;
}

 

[trych 11 Likes (Newbie)]

@OSUblake
Thanks a lot! Generally this seems to work, but I have the issue that in my setup, it starts blurring on scrolling, but it does not seem to animate back to 0 when I stop.
Here is the code that I currently have:

 

let proxy = { blur: 0 },
    filterSetter = gsap.quickSetter(".shape", "filter"), // fast
    clamp = gsap.utils.clamp(0, 40);

ScrollTrigger.create({
  onUpdate: (self) => {
    let blur = clamp(self.getVelocity() / -300);
    if (Math.abs(blur) > Math.abs(proxy.blur)) {
      proxy.blur = blur;
      gsap.to(proxy, {filter: "blur(0)", duration: 0.8, ease: "power3", overwrite: true, onUpdate: () => filterSetter("blur(" + proxy.blur + "px)")});
    }
  }
});

Any idea if there is something wrong maybe?

Thanks a lot!

[OSUblake 18,534 Likes (Superhero)]

It doesn't look like you are animating the blur property. Look at the proxy object. There is no filter property.

gsap.to(proxy, {blur: 0, duration: 0.8, ease: "power3", overwrite: true, onUpdate: () => filterSetter("blur(" + proxy.blur + "px)")});

 

[trych 11 Likes (Newbie)]

Ah, of course. I was missing that this was referring to the proxy object. Thanks, works great now! Performance is also good, even without the will-change.