如何解决我无法在我的 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 举报,一经查实,本站将立刻删除。