Gatsby 盖茨比&x2B;GSAP和ScrollTrigger在使用时出现问题<;链接>;
我在《盖茨比》中遇到了一个奇怪的问题,只有当我想用gsap和scrolltrigger插件为元素制作动画时才会出现这个问题。基本上,当我单击Gatsby 盖茨比&x2B;GSAP和ScrollTrigger在使用时出现问题<;链接>;,gatsby,gsap,scrolltrigger,Gatsby,Gsap,Scrolltrigger,我在《盖茨比》中遇到了一个奇怪的问题,只有当我想用gsap和scrolltrigger插件为元素制作动画时才会出现这个问题。基本上,当我单击元素时,一切都正常,但在我添加基于ScrollTrigger的code gsap动画后(正常的gsap工作正常),出现了一些问题,当我使用时,它不再正常工作。它将我重定向到正确的路径,但我只看到一个空白页。我需要刷新以查看该页面的实际内容 基本上我想创造很酷的介绍动画。用户将看到100vh屏幕上有文本和两个堆叠的框(红色和黑色),根据滚动位置,一个框将移到侧
元素时,一切都正常,但在我添加基于ScrollTrigger的code gsap动画后(正常的gsap工作正常),出现了一些问题,当我使用
时,它不再正常工作。它将我重定向到正确的路径,但我只看到一个空白页。我需要刷新以查看该页面的实际内容
基本上我想创造很酷的介绍动画。用户将看到100vh屏幕上有文本和两个堆叠的框(红色和黑色),根据滚动位置,一个框将移到侧面,另一个移到中间,完成整个序列后,用户将被重定向到“/什么”页面(我将使用navigate()进行此操作)
有人知道是什么导致了这个问题?我很高兴能得到帮助,因为我被困在这个…:/
import React from "react"
import { Helmet } from 'react-helmet'
import {useEffect, useRef} from "react"
import Layout from "../components/layout"
import viewStyles from "../components/modules/index.module.css"
import {gsap} from "gsap"
import {ScrollTrigger} from "gsap/ScrollTrigger"
import { navigate } from 'gatsby'
gsap.registerPlugin(ScrollTrigger);
// markup
const IndexPage = () => {
const redboxRef = useRef(null);
const blackboxRef = useRef(null);
const containerRef = useRef(null);
const textRef = useRef(null);
const circleRef = useRef(null);
useEffect(()=>{
const tl = gsap.timeline();
tl.to(redboxRef.current, {x: 1000, rotation: 100, scrollTrigger: {
trigger: containerRef.current,
start: "top top",
end:"+=1000",
scrub: 1.5,
pin: true,
}});
})
return (
<div id="container" ref = {containerRef}>
<Helmet>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap" rel="stylesheet"></link>
</Helmet>
<Layout>
<div className={viewStyles.introwrapper}>
<div ref={textRef} className={viewStyles.leftside}>
<h1><span>zen</span>coded</h1>
<p>we code future</p>
</div>
<div className={viewStyles.rightside}>
<div className={viewStyles.boxwrapper}>
<div className={viewStyles.rbwrapper}>
<div ref={blackboxRef} className={viewStyles.blackbox}>
<svg ref={circleRef} className={viewStyles.circle} width="32px" height="32px" viewBox="0 0 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" >
<title>Circle</title>
<g id="Version4-12.11-(11-name-chose)" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Home-Copy-14" transform="translate(-862.000000, -346.000000)">
<g id="Circle" transform="translate(862.000000, 346.000000)">
<circle id="Oval-Copy" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="52.9"></circle>
<circle id="Oval-Copy-2" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="46.4"></circle>
<circle id="Oval-Copy-3" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="39.9"></circle>
<circle id="Oval-Copy-4" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="32.9"></circle>
<circle id="Oval-Copy-5" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="26.4"></circle>
<circle id="Oval-Copy-6" stroke="#FFFFFF" strokeWidth="0.2" cx="53" cy="53" r="19.9"></circle>
<circle id="Oval-Copy-7" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="13.4"></circle>
<circle id="Oval-Copy-8" stroke="#FFFFFF" strokeWidth="0.2" cx="52.5" cy="53.5" r="6.4"></circle>
<circle id="Oval-Copy-10" fill="#FFFFFF" cx="52.5" cy="53.5" r="1.5"></circle>
</g>
</g>
</g>
</svg>
</div>
<div ref={redboxRef} className={viewStyles.redbox}>
<ul>
<li ref={redboxRef} className={viewStyles.redboxtext}>ux</li>
<li className={viewStyles.redboxtext}>web</li>
<li className={viewStyles.redboxtext}>code</li>
</ul>
<a>more</a>
</div>
</div>
</div>
</div>
</div>
</Layout>
</div>
)
}
export default IndexPage
从“React”导入React
从“react Helmet”导入{Helmet}
从“react”导入{useffect,useRef}
从“./组件/布局”导入布局
从“./components/modules/index.module.css”导入视图样式
从“gsap”导入{gsap}
从“gsap/ScrollTrigger”导入{ScrollTrigger}
从“盖茨比”导入{navigate}
gsap.registerPlugin(滚动触发器);
//加价
常量索引页=()=>{
const redboxRef=useRef(null);
const blackboxRef=useRef(null);
const containerRef=useRef(null);
const textRef=useRef(null);
const circleRef=useRef(null);
useffect(()=>{
const tl=gsap.timeline();
tl.to(redboxRef.current,{x:1000,旋转:100,scrollTrigger:{
触发器:containerRef.current,
开始:“顶上”,
结束:“+=1000”,
擦洗:1.5,
宾:是的,
}});
})
返回(
天顶编码
我们为未来编码
圆圈
- ux
- web
- 代码
更多
)
}
导出默认索引扩展
我明白了!:)问题出在这一行:
<div id="container" ref = {containerRef}>
我将该组件的主div作为容器处理,以便在scrollTrigger中将其作为目标。它工作了,但它也弄乱了react/gatsby组件结构(我猜:D)我刚刚在它下面添加了另一个div,有足够的ref,然后我瞄准了它,现在一切都很好
总而言之,如果您想在使用gsap和scrollTrigger时瞄准100vh容器,请不要触碰顶部lvl div.:) 我意识到问题是由ScrollTrigger value->pin引起的。只有当这个选项被应用时问题才会出现。伙计们,这太奇怪了。我在第二个项目上创建了完全相同的动画,所有设置都相同。当然,它也是用盖茨比写成的。在这个项目上是完全工作良好,但在我的主要项目,他们不会。。。太奇怪了。。