Why doesn't GSAP animation work in a React component?

Question

JavaScript

import TweenLite from 'gsap/umd/TweenLite';

class Background extends React.Component {
    constructor(props) {
        super(props);
        this.frame = React.createRef();
    }

    componentDidMount() {
        TweenLite.set(this.frame.current, { width: 0, height: 0, opacity: 0 });
        TweenLite.to(this.frame.current, 10, { width: '50%', height: '60%', opacity: 1 });
    }

    render() {
        const { children } = this.props;

        return (
            <div className="background" ref={this.frame}>
                <div className="background__content">
                    {children}
                </div>
            </div>
        );
    }
}

In this case, styles are written directly to the HTML element, and not to the style object:
https://yadi.sk/i/DQGdMATtlBqQ5g

Answer 1

You also need to include CSSPlugin. Or, instead of TweenLite, use TweenMax, which already includes it.