search

pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
28.2k stars 1.19k forks source link

How to animate between interpolated color values? #1196

Closed agonsalves closed 3 years ago

agonsalves commented 3 years ago

🤓 Question

Currently, I am interpolating a color value from an array, just like the examples show:

color.interpolate({range: [0, 1], output: ['#e96443', '#904e95']})

However, if I change the values of the output array, the resulting color value is instantly swapped to the new one without any transition. This is because the spring is only responsible for the number that the interpolation is based off of. I can't seem to find a method to feed the interpolated color value to the spring so that it gets animated when changed. Any help would be appreciated.

agonsalves commented 3 years ago

Nevermind. I was bull-headedly trying to accomplish this with nothing but react-spring, but once I realized I could just use a color interpolator before feeding it to the spring, everything worked out.