Реагируйте с помощью ScrollMagic - анимация объекта по всему экрану не имеет значения, насколько широкое окно браузера - PullRequest
Новая
       13

Реагируйте с помощью ScrollMagic - анимация объекта по всему экрану не имеет значения, насколько широкое окно браузера

0 голосов
/ 02 июня 2019

Я внедряю Scrollmagic в свое приложение React и анимирую что-то, появляющееся с левой стороны экрана и исчезающее с правой стороны.

У меня это работает, однако, если пользователь решит расширить окно, анимируемый объект исчезнет, ​​когда я установлю готовую позицию x на window.innerWidth

Теперь я имеюсоздал переменную в состоянии: 

 constructor(props) {
    super(props);

    this.state = { winWidth: '' };

  }

Затем я устанавливаю состояние в значение window.innerWidth каждый раз, когда окно изменяет размеры: 

componentDidMount() {
window.onresize = () => {
  this.setState({
    winWidth: window.innerWidth,
  });

  console.log(this.state.winWidth); // just so I can see that state is changing
};

}

Затем я назначил временную шкалу GSAP xПоложение в новом состоянии, думая, что это будет работать, но не работает. 

this.tl
  .fromTo(this.moped, 4, {
    x: '-400', 
  }, {
    x: this.state.winWidth,
  })

Codepen здесь

...