导入和注册 GSAP ScrollTrigger 插件时出现问题

Question

我在注册 Scroll Trigger 插件时遇到问题。当我 console.log(gsap.plugin) 时，ScrollTrigger 属性不存在，并且我的 DOM 元素都没有动画。

导入gsap和ScrollTrigger：

import  gsap  from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger";

注册插件：

gsap.registerPlugin(ScrollTrigger); 

我收到多个浏览器的警告，全部类似：无效的属性设置为缺少插件？ gsap.registerPlugin()

这是我的 ts 配置：

    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "outDir": "./dist",

使用gsap版本^3.12.5

我尝试安装 useGSAP 挂钩并使用它而不是 useLayoutEffect。我尝试将 gsap 导入为 { gsap } 并将 ScrollTrigger 导入为 { ScrollTrigger }。我还在我的index.html中尝试过这些脚本：

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

任何建议非常感谢

Answer 1

您可以从reactjs中的'gsap/all'导入ScrollTrigger插件。 这是下面的代码示例。

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/all';

gsap.registerPlugin(ScrollTrigger);