1

我在 Nextjs 中使用 GSAP，这是我的页面。在开发模式（npm run dev）下一切正常，但是当我静态构建项目（npm run build）时，元素不会出现；所以这发生在 scrollTrigger 插件上。因此，一切正常，但元素不会出现在构建中。提前谢谢谁能帮我一把。

import { Container, Row, Col } from "react-bootstrap";
import PisaTower from "../../public/pisaTower.svg";
import Illustration from "../../public/desk_illustration.svg";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef } from "react";
import { gsap, Power3 } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

export default function AboutMe(props) {
  const { t } = props;

  const title = useRef();
  const intro = useRef();
  const btn = useRef();

  gsap.registerPlugin(ScrollTrigger, Power3);

  useEffect(() => {
    gsap.from([title.current, intro.current, btn.current], {
      duration: 1.4,
      ease: Power3.easeOut,
      y: 200,
      opacity: 0,
      scrollTrigger: {
        markers: true,
        trigger: "#aboutMe",
        once: true,
        start: "top bottom",
        end: "top top",
        scrub: true,
      },
    });
  }, []);

  return (
    <>
      <section className="aboutMe mt-10 mb-10" id="aboutMe">
        <Container className="position-relative">
          <Row>
            <Col lg="12">
              <div className="card bg-white rounded-3 py-5 px-4 px-lg-6 border-0">
                <Row>
                  <Col lg="6" className="order-2 order-lg-1">
                    <div className="illustration text-center">
                      <Image
                        src={Illustration}
                        alt="Image illustrating a boy who works on his computer"
                      />
                    </div>
                  </Col>
                  <Col lg="6" className="my-auto order-1 order-lg-2">
                    <h2 className="display-3 mb-3 overflowY-hidden">
                      <div ref={title}>{t.aboutMeSection.title}</div>
                    </h2>
                    <div className="overflowY-hidden">
                      <p ref={intro}>{t.aboutMeSection.intro}</p>
                    </div>
                    <div className="overflowY-hidden">
                      <Link href="#services">
                        <a className="btn btn-primary mt-3" ref={btn}>
                          {t.buttons.services}
                        </a>
                      </Link>
                    </div>
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>
          <div className="pisaTower d-none d-lg-block">
            <Image src={PisaTower} alt="Tower of Pisa" />
          </div>
        </Container>
      </section>
    </>
  );
}

4

0 回答 0