Question

- 我正在使用反应框架。（create-react-app）和ScrollMagic Library，我正在尝试在scrollmagic框架中实现reactjs库。我无法导入以下脚本。

我已导入scrollmagic，如下所示

import * as ScrollMagic from 'scrollmagic'

但我无法使用此功能 - ＆gt; 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

尝试重新排序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>

Answer 2

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

问题是 'C:\Users\lukep\Downloads\Gladiator' 需要在文件内部导入 animation.gsap.js。我无法将 TweenMax 对象传递给它，直接编辑 TweenMax 显然不是要走的路。

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

删除animation.gsap.js
改为输入 ScrollMagicPluginGsap。这包括为您提供的 animation.gsap 和 TweenMax。

import('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap')

免责声明：

我是 JavaScript 新手
使用parceljs，所以不知道重新使用webpack、rollup 或其他包管理器

ScrollMagic GSAP，导入问题

2 个答案: