Почему на работает анимация GSAP в React-компоненте?

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>
        );
    }
}


При этом стили прописываются прямо к HTML-элементу, а не в объект style:
https://yadi.sk/i/DQGdMATtlBqQ5g
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
@kulaeff
Front-end developer
Нужно подключить еще также и CSSPlugin. Либо вместо TweenLite использовать TweenMax, который уже его включает.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 18:19
20000 руб./за проект
29 мар. 2024, в 18:08
2500 руб./за проект
29 мар. 2024, в 17:51
40000 руб./за проект