GSAP 动画未在生产中加载

Question

我正在与 Gatsby 和 GSAP 一起为动画制作个人作品集。它在开发中有效，但在生产中无效。我已经检查并阅读了大多数解决方案，但似乎不起作用，而且它们都很旧。我也在使用 React Hooks。

import React, { useEffect, useRef } from "react"
import { TweenMax, Power3, TimelineLite } from "gsap"
import Img from "gatsby-image"

const Projects = ({ title, text, img, link, linkText }) => {
  let app = useRef(null)
  let image = useRef(null)
  let contents = useRef(null)

  let tl = new TimelineLite({ delay: 0.8 })

  useEffect(() => {
    //For Header
    TweenMax.to(app, 0, {
      css: { visibility: "visible" },
    })

    //Image
    tl.from(image, 1.2, { y: 20, ease: Power3.easeOut }, "Start").from(
      image.firstElementChild,
      2,
      {
        scale: 1.6,
        ease: Power3.easeOut,
      },
      0.2
    )

    //Contents Animation
    const headlineFirst = contents.children[0]
    const headlineSecond = headlineFirst.nextSibling
    const headlineThird = headlineSecond.nextSibling

    tl.staggerFrom(
      [headlineFirst, headlineSecond, headlineThird],
      1,
      {
        y: 50,
        opacity: 0,
        ease: Power3.easeOut,
        delay: 0.8,
      },
      0.15,
      "Start"
    )
  }, [tl])

  return (
    <div
      ref={el => (app = el)}
      className="flex flex-wrap my-16 lg:my-20 px-4 lg:px-0"
    >
      <div className="w-full lg:w-3/5">
        <div ref={el => (image = el)} className="image-hover">
          <Img fluid={img} />
        </div>
      </div>

      <div className="w-full lg:w-2/5 lg:pl-10 mt-4 lg:mt-0">
        <div className="h-full flex justify-center items-center">
          <div ref={el => (contents = el)}>
            <h3 className="text-3xl">{title}</h3>
            <p className="text-lg">{text}</p>
            <a className="project-link text-base lg:text-lg" href={link}>
              Visit {linkText}
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Projects

我希望有人可以帮助我，今天必须上线。提前谢谢你。

Answer 1

找到了解决办法。在这种情况下，任何人都有同样的问题。这是解决方案，它对我有用。

import React, { useEffect, useRef, useState } from "react"
import gsap from "gsap"
import Img from "gatsby-image"

const Projects = ({ title, text, img, link, linkText }) => {
  let app = useRef(null)
  let image = useRef(null)
  let contents = useRef(null)

  const [tl] = useState(gsap.timeline({ delay: 0.8 }))

  useEffect(() => {
    //For Header
    tl.to(app, 0, {
      css: { visibility: "visible" },
    })

    //Image
    tl.from(image, 1.2, { y: 20, ease: "power3.easeOut" }, "Start").from(
      image.firstElementChild,
      2,
      {
        scale: 1.6,
        ease: "power3.easeOut",
      },
      0.2
    )

    //Contents Animation
    const headlineFirst = contents.children[0]
    const headlineSecond = headlineFirst.nextSibling
    const headlineThird = headlineSecond.nextSibling

    tl.staggerFrom(
      [headlineFirst, headlineSecond, headlineThird],
      1,
      {
        y: 50,
        opacity: 0,
        ease: Power3.easeOut,
        delay: 0.8,
      },
      0.15,
      "Start"
    )
  }, [tl])

  return (
    <div
      ref={el => (app = el)}
      className="flex flex-wrap my-16 lg:my-20 px-4 lg:px-0"
    >
      <div className="w-full lg:w-3/5">
        <div ref={el => (image = el)} className="image-hover">
          <Img fluid={img} />
        </div>
      </div>

      <div className="w-full lg:w-2/5 lg:pl-10 mt-4 lg:mt-0">
        <div className="h-full flex justify-center items-center">
          <div ref={el => (contents = el)}>
            <h3 className="text-3xl">{title}</h3>
            <p className="text-lg">{text}</p>
            <a className="project-link text-base lg:text-lg" href={link}>
              Visit {linkText}
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Projects

我发现 gsap 3 发生了很大变化。所以我从 gsap 导入 gsap 并用 useState 调用它，它在生产中工作

Answer 2

您只需在导入它们后register 尝试使用的全局变量，这样您的构建过程就不会摇晃它们：

gsap.registerPlugin(TweenMax, Power3, TimelineLite);

GreenSock 建议您使用Install Helper。