Animating filter: drop-shadow problem

[kalreg]

Hi,

 

I met a problem while trying to animate filter: drop-shadow css value. Pls check codepen.

 

What i am trying to achieve is to animate y position of shadow (making it bigger) and it's color. This pen is trying to shadow div, while in my project i try to shadow svg, but both examples works the same way - they stay as "from" value suggests and ignore "to" values. 

If i try to make it only with .to instead .fromTo  there is also no animation - just at the end of animation shadows appear in final stage.

 

Any ideas how to solve it?

Kalreg

See the Pen pWNKgW by kalreg (@kalreg) on CodePen

[Jonathan]

Hello @kalreg and Welcome to the GreenSock Forum!

 

I see the color animate. But it isnt animating the shadow y position due to the <offset-y> being 7px for each from  and to  drop-shadow values in your codepen. Just make the to  offset-y value a different value so GSAP can interpolate between the 2 different values.

 

filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>); // <spread-radius> is optional

 

Please see the spec for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()_2

 

Does this help or do you mean something else? If so please explain further so we can help you more. We don't want to misunderstand your issue.

 

Happy Tweening

[kalreg]

Thank you for reply, but actually that doesnt solve the issue. In fact i did an error in my pen and "from" y-offset is same as "to", but even if i change the first one to 0 and second to 7px it still wont animate. Also color of shadow doesnt change. The only thing that is tweened correctly is background color. 
I updated pen so you can check the correct version that doesnt work:

 

See the Pen pWNKgW by kalreg (@kalreg) on CodePen

If you check animation you can see that i want to tween size of shadow from 10 to 20px (y-offset). Instead i get 10px and no animation. Can you please advice how to animate y-offset?

Kalreg

[Carl]

GSAP doesn't officially support CSS filters as they are still not widely (or consistently) implemented in modern browsers.

 

Please see following threads for possible solutions

 

 

[Jonathan]

Yep @Carl is right! Its always best to use SVG filters so you get full cross browser support. Since CSS Filters are still not ready for prime time cross browser.

 

You can see how SVG Filters are fully supported cross browser:

• SVG FIlters : http://caniuse.com/#search=svg filters

 

But CSS Filters are still not supported fully cross browser:

• CSS Filters : http://caniuse.com/#search=CSS Filter Effects

[PointC]

Wouldn't box-shadow do pretty much the same thing?

 

See the Pen aLpWrr by PointC (@PointC) on CodePen

 

[Jonathan]

box-shadow might be great in this situation. Since the element your animating is not like a circle with a missing middle part, where in that case drop-shadow would be needed.