GSAP ScrollTrigger не работает с моим ящиком

Я пытаюсь изучить GSAP и хочу, чтобы некоторые элементы отображались при прокрутке, и я нашел плагин ScrollTrigger для GSAP. Однако это не работает. При прокрутке вверх он скользит назад, а при прокрутке вниз ничего не появляется.

import { useLayoutEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import gsap from "gsap";
import styled from "styled-components";

import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

const Container = styled.div`
  height: 4000px;
`;

function App() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    gsap.from(".box", {
      scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true,
        markers: true,
      },
      x: -1500,
      opacity: 0,
    });
  }, []);

  return (
    <>
      <Container>Hello World</Container>
      <div
        className = "box"
        style = {{ backgroundColor: "red", width: 300, height: 300 }}
      ></div>
      <Container></Container>
    </>
  );
}

export default App;