Any idea how to animate box-shadow?

[ryanflorence]

It's a silly rule since it doesn't have box-shadow-radius, spread, color, etc.

        boxShadow: anim.interpolate({
          inputRange: [ 0, 1 ],
          outputRange: [
            '0px 0px 0px hsla(0, 0%, 0%, 0.5)',
            '0px 0px 40px hsla(0, 0%, 0%, 0.5)'
          ]
        }),

That would be cool! but seems heavy to have to dig in and find every possible number that could be interpolating :\

Any ideas?

[browniefed]

@ryanflorence there is a PR open for it

[browniefed]

Ah has a conflicting issue, needs a rebase.

[arcanis]

If targeting the web, you could be using the Animated.template function to support it. Something like this would yield the result in your first post, but you could add other values to interpolate the other properties as well:

let value = anim.interpolate({ inputRange: [ 0, 1 ], outputRange: [ 0, 40 ] });
...
style.boxShadow = Animated.template `0px 0px ${value}px hsla(0, 0, 0, 0.5)`;

[browniefed]

Nothing that specific is actually needed. Just need to fix the interpolation to understand multi-values. https://github.com/animatedjs/animated/pull/47

[arcanis]

Sure, in this specific case it's only a workaround :)

[browniefed]

Yeah good point, I believe Leland Richardson had ideas about all of this. Although mostly in the form of building out new Animated.Value abilities w/ Animated.Shape

Lots of use cases to be covered, especially SVG paths which I think is a huge one.

[souporserious]

I'd love to help out with SVG interpolation if it's still needed :) I've been looking at a lot of libs that support this. I'm guessing it would need to work in both React Native and React Web? I should be able to handle the web side or at least start it, I'd be willing to look into RN as well and try to learn some things.