带有响应和gsap补间的Scrollmagic跳跃动画

Question

我正在尝试使用react-scrollmagic和react-gsap实现简单的滚动动画。我希望框在背景中缓慢移动，并且希望一些文本也从左至右移动。现在，动画超级跳动，我不确定为什么。

我尝试使用时间轴组件，但是仅当补间是时间轴的直接子代时，它才起作用。我确定我做错了什么，但不确定我做错了什么或应该怎么做。

这是一个带有问题的密码箱。 CodeSandbox Example

这是代码：

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

const Services = () => {
  const ref = useRef(null);
  return (
    <Controller>
      <Scene triggerElement={ref.current} duration="200%">
        {progress => (
          <section ref={ref}>
            <Tween
              from={{
                y: "0"
              }}
              to={{
                y: "40%"
              }}
              totalProgress={progress}
            >
              <div className="bg" />
            </Tween>

            <div className="container">
              <div className="row">
                <div className="col-lg-12">
                  <div className="wrapper">
                    <div className="overlay" />
                    <Tween
                      from={{
                        x: "0"
                      }}
                      to={{
                        x: "40%"
                      }}
                      totalProgress={progress}
                    >
                      <p>Get Started</p>
                    </Tween>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}
      </Scene>
    </Controller>
  );
};

export default Services;

如果有人知道这一点，我将不胜感激。