Color issue tweening filter: drop-shadow()

[elegantseagulls 209 Likes (Specialist)]

Hey GSAPers, 

 

I'm working on animating  a drop-shadow filter, but every time I try to add a color value in, the tween breaks. Am I doing something wrong? 

See Pen for example: 

See the Pen rGaQYP by ryan_labar (@ryan_labar) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Hi @elegantseagulls

 

Sometimes it helps to look at the computed style to see how the browser formats it. So in Chrome, it has the color first.

 

See the Pen LzEXoZ?editors=0010 by osublake (@osublake) on CodePen

 

[elegantseagulls 209 Likes (Specialist)]

Thanks @OSUblake! 

That should do the trick for Chrome, but it doesn't seem to be working in FireFox, I tried prefixing, as well as moving the color values back to end. Any thoughts?

[OSUblake 9,990 Likes (Superhero)]

7 hours ago, elegantseagulls said:

That should do the trick for Chrome, but it doesn't seem to be working in FireFox, I tried prefixing, as well as moving the color values back to end. Any thoughts?

 

Hmmm... that's strange. If I comment out the set tween, it works in Firefox.

See the Pen eGmxPV by osublake (@osublake) on CodePen

 

 

 

Using an SVG filter might be the most sane option here, although there is currently no support for using an url in IE and Edge.

 

See the Pen BwyMMK?editors=0010 by osublake (@osublake) on CodePen

 

This page shows the SVG equivalent of a CSS filter.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

 

 

 

[elegantseagulls 209 Likes (Specialist)]

@OSUblake

 

 

Very interesting. Looks like I'll have to change my markup/js to use SVG filters. IEdge support wont be a big deal, as it's basically just an enhancement to provide some environmental depth.

 

Thanks for the help!