与ScrollMagic交互-在整个屏幕上动画化对象无所谓浏览器窗口的宽度

Question

我正在将Scrollmagic实现到我的React App中，并对来自屏幕左侧的动画进行动画处理，然后消失在右侧。

我已经完成了这项工作，但是如果用户决定扩展窗口，则当我将完成的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 here