Gatsby + GSAP 和 ScrollTrigger 使用 <Link> 的问题

Posted 2023-05-08

【中文标题】Gatsby + GSAP 和 ScrollTrigger 使用 <Link> 的问题

【英文标题】：Gatsby + GSAP and ScrollTrigger problem with using <Link>

【发布时间】：2021-03-17 06:56:20

【问题描述】：

我在 Gatsby 中遇到了一个奇怪的问题，它仅在我想使用 gsap 和 scrolltrigger 插件为元素设置动画时才会发生。基本上，当我单击<Link> 元素时，一切正常，但是在我添加基于 ScrollTrigger 的代码 gsap 动画之后（正常 gsap 工作正常）出现问题，当我使用 <Link> 时，它不再正常工作。它正在将我重定向到正确的路径，但我只看到一个空白页。我需要刷新才能看到该页面的实际内容。

基本上我想创建很酷的介绍动画。用户将看到 100vh 屏幕，其中包含文本和堆叠的两个框（红色和黑色），并且基于滚动位置，一个框将移至一侧，另一个移至中心，完成整个序列后，用户将被重定向到“/what”页面（我将为此使用 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   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

【问题讨论】：

我意识到问题是由 ScrollTrigger value -> pin 引起的。仅当应用此选项时才会出现问题。

伙计们，这太奇怪了。我有第二个项目，我在该项目上创建了完全相同的动画，所有设置都相同。当然它也是用盖茨比写的。在这个项目上 工作得很好，但在我的主要项目上他们不会......太奇怪了......

【参考方案1】：

我明白了！ :) 问题出在这一行：

 <div id="container" ref = containerRef>

我将该组件的主 div 视为容器，以便在 scrollTrigger 中定位它。它起作用了，但它也弄乱了 react/gatsby 组件结构的一些东西（我猜：D）我刚刚在它下面添加了另一个具有足够参考的 div，然后我将它作为目标，现在一切正常。

总结一下——如果你想在使用 gsap 和 scrollTrigger 时定位 100vh 容器，请不要触摸顶部 lvl div。 :)