Animation backdrop-filter: blur?

[qqignatqq]

Hello. Tell me, is it possible to animate the background with gsap backdrop-filter: blur?

[qqignatqq]

ok...

backdropFilter: "blur(10px)",

[ZachSaucier]

Nice job figuring it out! That's the same approach that is used in our unofficial blur plugin that's used as an example of a custom plugin:

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

[pbohny]

Can I pack this in a plugin file and make it available like standard plugins?

[Rodrigo]

Hi @pbohny,

 

I don't see why not.

 

Happy Blurring!

[pbohny]

Thought as much😄 but I don't know how to make a BlurPlugin.js file from the selfexecuting function. I would like to do as follows

 

import BlurPlugin from "gsap/BlurPlugin";

gsap.registerPlugin(BlurPlugin);

 

[Rodrigo]

Hi,

 

You can take a look at this video in order to learn how to create your own GSAP Plugin:

If you have more questions, please include a minimal demo that shows what you got already and where you're getting stuck.

 

Happy Tweening!

[GreenSock]

9 hours ago, pbohny said:

Thought as much😄 but I don't know how to make a BlurPlugin.js file from the selfexecuting function. I would like to do as follows

 

import BlurPlugin from "gsap/BlurPlugin";

gsap.registerPlugin(BlurPlugin);

 

Yeah, you have to do some things differently if you want to use it as an ES Module. I've attached a zip with 3 different formats: 

• A minified UMD file (you could load this via a <script> tag).
• A universally-compatible ES Module file (for your imports as you described)
• A raw source file that's basically the same as the ES Module, but with more modern syntax (you probably have no use for this, but I figured I'd include it anyway)

Does this work the way you hoped? 

BlurPlugin.zip

[pbohny]

Thanks Jack! Exactly what I wanted to do and miserably failed. 

I import the ESM version and it works like a charm-

[aln]

On 12/21/2019 at 10:51 PM, ZachSaucier said:

Nice job figuring it out! That's the same approach that is used in our unofficial blur plugin that's used as an example of a custom plugin:

 

 

This is for filter:blur() right? How do i change it to backdrop-filter which is the original question anyway? Also how can i include the webkit prefix?

[GreenSock]

3 hours ago, aln said:

This is for filter:blur() right? How do i change it to backdrop-filter which is the original question anyway? Also how can i include the webkit prefix?

If you'd like some help, @aln, please provide a minimal demo (like a CodePen) showing what you're trying to do. The overall concept illustrated by the BlurPlugin above should apply to whatever property you want - you just have to adjust the code in the plugin to target that property.