Блог

Я учусь РЕАГИРОВАТЬ, и я также был очарован 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;

 

на экране отображается только фон кремового цвета без вывода. Там были какие-то ошибки, и я решил их, но теперь ничего не появляется. Я исправил каждую ошибку и предупреждение, но по-прежнему не выводил as..
если кто-нибудь может помочь !