javascript - 输出未显示（反应）？

Question

我正在学习 REACT，我也对 GSAP 着迷，所以我尝试将两者合并，但现在屏幕上没有显示输出。谁能告诉我做错了什么？

import React, { useRef, useEffect } from 'react';
import './App.css';
import './components/Gsap.css'
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import yash1 from './components/yash1.png';
import yash2 from './components/yash2.png';
import yash3 from './components/yash3.png';
import manan1 from './components/manan1.png';
import manan2 from './components/manan2.png';
import ankit1 from './components/ankit1.png';
import ankit2 from './components/ankit2.png';
import ankit3 from './components/ankit3.png';



function App() {
  gsap.registerPlugin(ScrollTrigger)
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current
    gsap.timeline({
        ScrollTrigger: {
            trigger: "#ImgWrapper",
            start: "0% 0%",
            end: "100% 0%",
            pin: "#ImgWrapper",
            scrub: 5,
            onMouseEnter: () => {
                gsap.to(element.querySelector('#ImgWrapper'), { backgroundColor: "white", })
            },
            onMouseOut: () => {
                gsap.to(element.querySelector('#ImgWrapper'), { backgroundColor: "white", })
            }
        }   
    })
    .to('#ImgWrapper #img8', { transform: 'translateZ(5500px)', }, 0)
    .to('#ImgWrapper #img7', { transform: 'translateZ(4500px)', }, 0)
    .to('#ImgWrapper #img6', { transform: 'translateZ(3700px)', }, 0)
    .to('#ImgWrapper #img5', { transform: 'translateZ(3100px)', }, 0)
    .to('#ImgWrapper #img4', { transform: 'translateZ(2800px)', }, 0)
    .to('#ImgWrapper #img3', { transform: 'translateZ(2600px)', }, 0)
    .to('#ImgWrapper #img2', { transform: 'translateZ(2400px)', }, 0)
    .to('#ImgWrapper #img1', { transform: 'translateZ(2200px)', }, 0)
    
}, [])
  return (
    <div className="App" ref = {ref} >
      <div id="wrapper">
          <h1>Unusual Imaginative<br /> <span>GSAP Scroll Effect</span></h1>
          <p>Scroll Down</p>
      </div>
      <div id="ImgWrapper">
          <img id = "img1" src = { yash1 } alt = '' />
          <img id = "img2" src = { yash2 } alt = '' />
          <img id = "img3" src = { yash3 } alt = '' />
          <img id = "img4" src = { manan1 } alt = '' />
          <img id = "img5" src = { manan2 } alt = '' />
          <img id = "img6" src = { ankit1 } alt = '' />
          <img id = "img7" src = { ankit2 } alt = '' />
          <img id = 'img8' src = { ankit3 } alt = '' />
      </div>
    </div>
  );
}

export default App;

屏幕上只显示奶油色背景，没有输出。有一些错误，我解决了它们，但现在什么都没有出现。我纠正了每个错误和警告，但仍然没有输出……如果有人可以帮忙！

标签： javascriptreactjsgsap