Jump to content
GreenSock

elegantseagulls

Color issue tweening filter: drop-shadow()

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×