我无法在我的 React JS 应用 GSAP 滚动动画中实现

问题描述

嗨，我是 React JS 的新手，想将此动画集成到我的 React 应用程序 Gsap animation I want to use in my project 中，但由于缺乏知识，我被卡住了，请帮助我并指导我如何解决我遇到的错误正在得到。

Error Screen Have a look at it please

这是 JSX 文件代码：

import React from "react";
import "./ImageAnimation.css";
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Scrollbar from 'smooth-scrollbar';

gsap.registerPlugin(ScrollTrigger);
let bodyScrollBar = Scrollbar.init(document.body,{
  damping: 0.1,delegateto: document,});
ScrollTrigger.scrollerProxy(".scroller",{
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  },});
bodyScrollBar.addListener(ScrollTrigger.update);







gsap.set(".panel",{ zIndex: (i,target,targets) => targets.length - i });

var images = gsap.utils.toArray('.panel:not(.purple)');

images.forEach((image,i) => {
  
  var tl = gsap.timeline({
    
    scrollTrigger: {
      trigger: "section.black",scroller: ".scroller",start: () => "top -" + (window.innerHeight*(i+0.5)),end: () => "+=" + window.innerHeight,scrub: true,toggleActions: "play none reverse none",invalidateOnRefresh: true,}
    
  })
  
  tl
  .to(image,{ height: 0 })
  ;
  
});







gsap.set(".panel-text",targets) => targets.length - i });

var texts = gsap.utils.toArray('.panel-text');

texts.forEach((text,start: () => "top -" + (window.innerHeight*i),}
    
  })
  
  tl
  .to(text,{ duration: 0.33,opacity: 1,y:"50%" })  
  .to(text,opacity: 0,y:"0%" },0.66)
  ;
  
});





ScrollTrigger.create({

    trigger: "section.black",markers: true,pin: true,start: () => "top top",end: () => "+=" + ((images.length + 1) * window.innerHeight),});


export default function App() {



  return (
        <div class="scroller">
      
            <section class="orange">
                <div class="text">This is some text inside of a div block.</div>
            </section>
      
            <section class="black">
        
                <div class="text-wrap">          
          <div class="panel-text blue-text">Blue</div> 
          <div class="panel-text red-text">Red</div>   
          <div class="panel-text orange-text">Orange</div> 
          <div class="panel-text purple-text">Purple</div> 
        </div>
        
                <div class="p-wrap">
                    <div class="panel blue"></div> 
                    <div class="panel red"></div>
                    <div class="panel orange"></div> 
                    <div class="panel purple"></div> 
                </div>
        
            </section>
      
            <section class="blue"></section>
      
        </div>
  );
}

这是我的 CSS 代码

    body,html {
  margin: 0;
}
.scroller {
  height: 100vh;
}

.orange {
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  height: 100vh;
  -webkit-Box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #753500;
}

.text {
  color: #fff;
}

.black {
  display: -webkit-Box;
  display: -webkit-flex;
  display: -ms-flexBox;
  display: flex;
  height: 100vh;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-Box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #070707;
}

.blue {
  height: 100vh;
  background-color: #00026d;
}


.text-wrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 80vh;
}

.panel-text {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 900;
  text-align:center;
  background-color: #070707;
  
  transform:translateY(100%);
  opacity: 0;
}

.panel-text.blue-text {
  color: blue;
}

.panel-text.red-text {
  color: red;
}

.panel-text.purple-text {
  color: purple;
}

.panel-text.orange-text {
  color: orange;
}


.p-wrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 80vh;
}

.panel {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url("../src/images/pic1.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.panel._2 {
  z-index: 1;
  background-image: url("../src/images/pic1.png");
}

.panel.blue {
  z-index: auto;
}

.panel.red {
  z-index: auto;
  background-color: red;
  background-image: none;
}

.panel.orange {
  z-index: auto;
  background-color: #cf5d00;
  background-image: none;
}

.panel.purple {
  z-index: auto;
  background-color: #808;
  background-image: none;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）