使用GSAP反应动画ScrollMagic

Question

当react-scrollmagic和react-gsap进入视口时，我正在尝试为元素设置动画。

它可以工作，但是gsap动画根据滚动的持续时间播放。我想要实现的是像输入setTween在scrollmagic gsap插件上所做的那样，在输入时对其进行动画处理。

我只是想知道是否有办法使用这些软件包来达到这种效果。

import React from "react";
import ReactDOM from "react-dom";
import { Controller, Scene } from "react-scrollmagic";
import { Tween } from "react-gsap"

function App() {
  return (
    <div className="App" style={{ height: "2000px" }}>
    <div style={{ height: '100vh' }} />
    <Controller>
      <Scene triggerHook="onCenter" duration={300}>
        <Tween from={{ xPercent: 10 }} to={{ xPercent: 100 }}>
        <div style={{ height: "200px", width: "200px", background: "red" }}></div>
        </Tween>
      </Scene>
    </Controller>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从<Scene>中删除持续时间只是立即播放gsap动画。 https://codesandbox.io/s/7wnp7v6wn0