Different CSS Filter properties animating on same element with different durations - (is this possible?)

[andrewycode]

So as you can see in my example, I'm wanting to animate an element's blur and brightness.

 

But my question is - is it possible to animate the element's blur with a duration of 1 while also animating it's brightness with a duration of 3?

 

I'm thinking that this isn't possible, since blur and brightness are both part of the same CSS property (filter). But I wanted to ask the forum and see if anyone has any ideas? Thanks!

See the Pen Poadqvm?editors=1010 by andrewycode (@andrewycode) on CodePen

[Rodrigo]

Hi,

 

Actually  the CSS Spec allows for multiple values for the filter property (like transform, transitions, etc.):

.filter {
  filter: brightness(0.5) blur(5px);
}

All you have to do is pass the filter value as a string and the CSS Plugin does the magic for us!! 🪄

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

 

The one thing I noticed though is that if you don't set up the initial value for brightness in the CSS, it starts at 0. Maybe @GreenSock can clarify the reason for that, but as you can see it works as expected.

 

Let us know if you have more questions.

 

Happy Tweening!

[andrewycode]

@Rodrigo - thanks for your response, but I think you misunderstood my question. I'm wondering if it is possible to animate brightness with a different duration than blur on the same element. (ie: animate brightness for a duration of 3 and blur for a duration of 1).

[Rodrigo]

Hi,

 

Yeah that's not possible just with CSS filters I'm afraid. You could try canvas or WebGL, I know hat with PIXI has a very robust set of filters that you could explore to create the effect at the same time with different durations:

https://pixijs.io/examples/#/gsap3-interaction/gsap3-filters.js

 

Happy Tweening!

[andrewycode]

@Rodrigo - ok totally makes sense, thank you for your help

[GreenSock]

6 hours ago, Rodrigo said:

The one thing I noticed though is that if you don't set up the initial value for brightness in the CSS, it starts at 0. Maybe @GreenSock can clarify the reason for that, but as you can see it works as expected.

Yeah, because GSAP can't automatically just know what numbers are supposed to be - so in this case, imagine trying to interpolate between these two values: 

"blur(0px)"
"brightness(0.5) blur(5px)"

With complex strings, it has to just look through the string and find the numeric values and then try to match them up with the starting one. So your ending string has TWO number slots whereas the starting string has only one. So GSAP just moves along in the string for each slot - "animate between the two values in slot one, and animate between the two values in slot two" but if it can't find a matching slot value, it just says "okay, I guess I'll just put 0 in there". Otherwise it can't really animate between null and some number. What you're basically expecting here is that GSAP would know that in this particular case the missing value should be 1 instead of 0.

 

6 hours ago, andrewycode said:

I'm wondering if it is possible to animate brightness with a different duration than blur on the same element. (ie: animate brightness for a duration of 3 and blur for a duration of 1).

A pretty simple way of accomplishing this is by using CSS variables: 

See the Pen oNyPzLp?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Pretty much anything is possible in GSAP once you understand the building blocks. So if you don't want to use CSS variables (not sure why that'd be a problem), you could still accomplish it various other ways like building your own plugin (or two): 

 

See the Pen NWKjEBG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But you'd need to build it in a way that'd compose the values because the filter can have a blur AND brightness or just one or the other. It's very similar to transforms. So your plugin would need to have that logic built in. It's all entirely doable, but building that for you is beyond the scope of help we can provide for free in these forums. If you'd like to hire us on a consulting basis to help build something like that, feel free to contact us.

 

Happy tweening!