React-motion: Can you animate colors in react-motion?

[reintroducing]

Apologies but I'm not sure what the best place to pose this question is. I'm doing a little POC on using react-motion just to see how it is to animate with it and am trying to animate the background color of a div (I know I can do this many other ways but I'm just giving this a test run to see and get familiar with it). Here is my code:

import React, {Component} from 'react';
import {Motion, spring} from 'react-motion';

class ReactMotion extends Component {
    constructor(props) {
        super(props);

        this._boxClick = this._boxClick.bind(this);

        this.state = {
            faded: false
        };
    }

    _boxClick(evt) {
        this.setState({
            faded: !this.state.faded
        });
    }

    render() {
        const styles = {
            // opacity: spring(this.state.faded ? 0 : 1),
            backgroundColor: spring(this.state.faded ? '#ff0000' : '#00ff00')
        };

        return (
            <Motion style={styles}>
                {({opacity, backgroundColor}) => {
                    console.log(opacity, backgroundColor);
                    return <div className="box" style={{/*opacity: `${opacity}`, */backgroundColor: `${backgroundColor}`}} onClick={this._boxClick}></div>;
                }}
            </Motion>
        );
    }
}

export default ReactMotion;

This code works when using the opacity variant but when i switch to backgroundColor it does not. I'm just clicking the box to flip between the opacity (or bg color).

Am I misunderstanding the usage of react-motion, doing something wrong, or just completely off base here? I'd love it if someone could point me in the right direction.

[JakeCoxon]

The springs can only interpolate number values. You can either have a separate spring for the 3 RGB channels, or if you will only have two colours you could use one spring from 0 to 1 and use a colour interpolate function

rgb(springR, springG, springB)

chroma.interpolate('#ff0000', '#00ff00', backgroundColorSpring).css()
https://github.com/gka/chroma.js/blob/master/doc/api.md

[reintroducing]

Thanks Jake for the explanation, makes sense and is what I suspected but it's good to get validation as its not clearly outlined anywhere that I could find. Appreciate it!

[JakeCoxon]

No problem. I missed the I know I can do this many other ways so apologies if I explained what you already knew. At least it will come up in other people's search

[reintroducing]

I meant along the lines of CSS or other mechanisms not react-motion :) the more info the better for myself and future searchers.