GSAP Scrolltrigger PIN 在 nextjs 中无法正常工作答案

【问题标题】：GSAP Scrolltrigger PIN not working properly in nextjsGSAP Scrolltrigger PIN 在 nextjs 中无法正常工作
【发布时间】：2023-02-16 20:36:11
【问题描述】：

从我下面的代码中，如果我注释掉 pin: true 属性，代码可以正常工作，但是包装我希望水平滚动的部分的容器不会粘在顶部。如果我取消注释 pin: true，所有容器（触发器）都将不可见。

将不胜感激有关如何解决此问题的任何建议。

import React, { useEffect } from "react";
import OverlayMenu from "./OverlayMenu";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

function MainContent({ overlayRef }) {
  gsap.registerPlugin(ScrollTrigger);
  useEffect(() => {
    // alert(document.querySelector(".main__content").offsetWidth)
    const sections = gsap.utils.toArray(".section");
    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".main__content",
        scrub: 1,
        markers: true,
        start: "top top",
        // // snap: 1 / (sections.length - 1),
        end: "+=" + document.querySelector(".main__content").offsetWidth,
        pin: true,
      },
    });
  }, []);

  return (
    <div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
      <div className="w-full relative h-screen">
        <OverlayMenu overlayRef={overlayRef} />
        {/* <div className="w-full h-screen bg-black"></div> */}
        <div className="main__content w-[300%] bg-purple-700 h-screen flex  flex-nowrap">
          <div className="section w-full h-screen- bg-red-500">1</div>
          <div className="section w-full h-screen- bg-blue-500">2</div>
          <div className="section w-full h-screen- bg-yellow-500">3</div>
        </div>
      </div>
    </div>
  );
}

export default MainContent;

【问题讨论】：

后来发现问题出在react 18的strict mode，导致页面多次挂载。解决方案是禁用严格模式（如果不会影响您的应用程序），或者您也可以使用反应状态检查页面是否已呈现，然后创建 gsap 时间线的实例，然后在它出现时想做第二次安装，你阻止它。

标签： css reactjs next.js css-animations gsap

【解决方案1】：

将版本退回到3.8.0

yarn add gsap@3.8.0

或者

npm install gsap@3.8.0

【讨论】：

【解决方案2】：

import React, { useEffect, useState } from "react";
import OverlayMenu from "./OverlayMenu";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

function MainContent({ overlayRef }) {
  gsap.registerPlugin(ScrollTrigger);
  const [hasRendered, setHasRendered] = useState(false);
  useEffect(() => {
    // ******This will set the state of hasRendered when the page render so as to keep track of the rendering steps *******
    setHasRendered(true);
  }, []);

  useEffect(() => {
    // ******* I added the conditional statement here to only create the instance of the gsap timeline ONLY after the page has rendered*******
    if (hasRendered) {
      // alert(document.querySelector(".main__content").offsetWidth)
      const sections = gsap.utils.toArray(".section");
      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: ".main__content",
          scrub: 1,
          markers: true,
          start: "top top",
          // // snap: 1 / (sections.length - 1),
          end: "+=" + document.querySelector(".main__content").offsetWidth,
          pin: true,
        },
      });
    }
  }, [hasRendered]); //******** Dont forget the dependencies array too */

  return (
    <div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
      <div className="w-full relative h-screen">
        <OverlayMenu overlayRef={overlayRef} />
        {/* <div className="w-full h-screen bg-black"></div> */}
        <div className="main__content w-[300%] bg-purple-700 h-screen flex  flex-nowrap">
          <div className="section w-full h-screen- bg-red-500">1</div>
          <div className="section w-full h-screen- bg-blue-500">2</div>
          <div className="section w-full h-screen- bg-yellow-500">3</div>
        </div>
      </div>
    </div>
  );
}

export default MainContent;

【讨论】：