Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
trych

quickSetter() for filter: blur ?

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution
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;
}

 

  • Like 3
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×