ScrollMagic GSAP，导入问题

Question

-I正在使用react框架。(create-react-app)和ScrollMagic库，我正在尝试在reactjs框架中实现scrollmagic库。我无法导入以下脚本。

我已经导入了scrollmagic，如下

import * as ScrollMagic from 'scrollmagic'

但我无法使用此功能->setTween()，因为他们无法访问。

以下是错误日志。

15:41:01:381 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

我尝试过将外部cdn脚本导入到public/index.html中，但没有成功。我也尝试过这个import('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap') import('scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators')

但没那么走运。上述导入后的错误日志

Module not found: Can't resolve 'TimelineMax' in '~\node_modules\scrollmagic\scrollmagic\uncompressed\plugins'

我已经把它搞得一团糟很长时间了，我真的很感谢你的解决方案。

谢谢

Answer 1

我的解决方案是使用https://www.npmjs.com/package/scrollmagic-plugin-gsap

问题是animation.gsap.js需要在文件内部导入TweenMax。我无法将TweenMax对象传递给它，并且直接编辑animation.gsap.js显然不是可行的方法。

但是这个插件可以处理它。所以这对我很有效：

请改为删除import('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap')

• Input

1. 。包括animation.gsap和TweenMax。

import { TweenMax, TimelineMax } from "gsap"; // What to import from gsap
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
 
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax); // Pass gsap import to Scrollmagic

免责声明：

• 我是javascript新手
• 使用的是parceljs，所以不知道是不是或者其他的包管理器

。

Answer 2

尝试重新排序HTML文档中的脚本。从GSAP TweenMax CDN开始，然后添加ScrollMagic CDN链接。最后，你将拥有你的GSAP动画插件。这一切都是关于脚本顺序的，这样就可以首先读取必要的库和它们的方法。

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<!-- ScrollMagic -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.js"></script>

<!--GSAP animation plugin should be placed after ScrollMagic! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>