Reactjs GSAP动画未在生产中加载

我正在与盖茨比和GSAP合作制作个人动画作品集。它在开发中起作用，但在生产中不起作用。我检查并阅读了大多数解决方案，但似乎不起作用，而且它们都是旧的。我也在使用React钩子

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

import React，{useffect，useRef}来自“React”
从“gsap”导入{TweenMax，Power3，TimeLineSite}
从“盖茨比图像”导入Img
const项目=（{title，text，img，link，linkText}）=>{
让app=useRef（null）
让image=useRef（null）
let contents=useRef（null）
设tl=新的时间线（{延迟：0.8}）
useffect（（）=>{
//用于标题
TweenMax.至（应用程序，0{
css:{可见性：“可见”}，
})
//形象
tl.from（图像，1.2，{y:20，ease:Power3.easeOut}，“开始”）.from(
image.firstElementChild，
2.
{
比例：1.6，
ease:Power3.easeOut，
},
0.2
)
//内容动画
const headlineFirst=contents.children[0]
const headlineSecond=headlineFirst.nextSibling
const headlinehird=headlineSecond.nextSibling
从(
[headlineFirst，headlineSecond，headlinehird]，
1.
{
y:50，
不透明度：0，
ease:Power3.easeOut，
延迟：0.8，
},
0.15,
“开始”
)
}，[tl]）
返回(
（app=el）}
className=“flex-flex-wrap my-16 lg:my-20 px-4 lg:px-0”
>
（image=el）}className=“图像悬停”>
（contents=el）}>
{title}
{text}
)
}
导出默认项目

---

我希望有人能帮我，今天就要上线了。提前感谢。

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

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

import React，{useffect，useRef，useState}来自“React”
从“gsap”导入gsap
从“盖茨比图像”导入Img
const项目=（{title，text，img，link，linkText}）=>{
让app=useRef（null）
让image=useRef（null）
let contents=useRef（null）
const[tl]=useState（gsap.timeline（{delay:0.8}））
useffect（（）=>{
//用于标题
tl.to（应用程序，0{
css:{可见性：“可见”}，
})
//形象
tl.from（图，1.2，{y:20，ease:“power3.easeOut”}，“Start”）.from(
image.firstElementChild，
2.
{
比例：1.6，
轻松：“power3.easeOut”，
},
0.2
)
//内容动画
const headlineFirst=contents.children[0]
const headlineSecond=headlineFirst.nextSibling
const headlinehird=headlineSecond.nextSibling
从(
[headlineFirst，headlineSecond，headlinehird]，
1.
{
y:50，
不透明度：0，
ease:Power3.easeOut，
延迟：0.8，
},
0.15,
“开始”
)
}，[tl]）
返回(
（app=el）}
className=“flex-flex-wrap my-16 lg:my-20 px-4 lg:px-0”
>
（image=el）}className=“图像悬停”>
（contents=el）}>
{title}
{text}
)
}
导出默认项目

我发现GSAP3改变了很多。因此，我从gsap导入了gsap，并使用useState将其命名，它在生产中起作用

导入后，您只需将您尝试使用的全局文件重新命名，这样您的构建过程就不会对其进行树震动：

gsap.registerPlugin(TweenMax, Power3, TimelineLite);

---

GreenSock建议您使用GSAP3中的。

在每个tween中都包含交错，因此您应该使用带有交错参数的常规.from（）tween。duration参数也已折旧，改为将其包含在vars参数中。您也不需要包含css:{}，因为GSAP识别DOM元素并自动为您将css属性应用于它。有关更多信息，请参阅文章。您的“power3.easeOut”易用性也无效。它应该是“power3.out”-用于获得正确的格式。另外请注意，out是默认值，因此“power3”也将是相同的。它与gsap3一样是新的。我们建议您只使用改进和缩短的GSAP 3格式，而不是旧的GSAP 2格式。