Possibility to animate backdropFilter

[ManuSevenval]

I have a feature request:

What about being able to animate the backdropFilter property as well?

I think we could easily add the following filters for backdropFilter within react-plx pretty easily, since they only use linear values:

blur();
brightness();
contrast();
grayscale();
hue-rotate();
invert();
opacity();
sepia();
saturate();

I would not add drop-shadow since we would have to accept four arguments here:
drop-shadow(4px 4px 10px blue);.

Furthermore I can not think of a way to animate the svg filters via backdrop-filter: url(commonfilters.svg#filter);

I am gladly willing to contribute and open a PR if you approve the feature :)

[Stanko]

Hi @ManuSevenval,
It would be great if you can do a PR for backdrop-filter.

Plx already has support for:

Supported CSS filters are:

• blur
• brightness
• contrast
• grayscale
• hueRotate
• invert
• opacityFilter (as it shares the same name as CSS opacity)
• saturate
• sepia

Be aware that animating these filters on scroll will probably introduce performance issues.

Cheers!

[dil25]

can we use text shadow or drop shadow filter now?

[Stanko]

@dil25 unfortunately not, because both properties have multiple numerical values plus color. That means it needs a different approach and decent amount of work to implement these.

Examples:

filter: drop-shadow(30px 10px 4px #4444dd);

text-shadow: 1px 1px 2px black;