主页 / 问题 / 961399
Accepted
Aleksandr Krais
Asked:2020-03-26 13:23:43 +0000 UTC2020-03-26 13:23:43 +0000 UTC

ScrollMagic 不能与 GSAP 一起使用？

  • 772

大家好，我正在尝试学习滚动动画，我想为此尝试使用 GSAP 的 ScrollMagic，但我什至无法编译我的文件。我将 laravel.mix 用于 webpack 作为我的项目构建器。

我试图在互联网上搜索答案，我发现的唯一一件事是：gsap 必须连接到 scrollmagic，事实上，我有它有点像..

我究竟做错了什么？以及如何解决它以使一切正常？

我的 javascript 看起来像这样：

import {TimelineMax} from 'gsap';
import ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

let tl = new TimelineMax();
let firstMan = document.getElementById('first-man');
tl.to(firstMan, 1, {x:'-100', y:'70'});

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    duration: '100%', // resposive duration in %
    offset: 0, // offset trigger position by 100px
    triggerElement: '#firstTrigger', // what will trigger scene
    triggerHook: 0
});

scene.addIndicators({name: 'bla bla'});
scene.setTween(tl);
scene.addTo(controller);

这是我的项目依赖项的样子： package.json 文件截图

但是当我尝试运行这段代码时，它给了我以下错误： 编译错误截图

好的，我尝试了他的要求： 尝试安装它要求的模块时出现 npm 错误

javascript

1 个回答

  1. Best Answer

    经过n次寻找问题的解决方案，在这里找到了答案

    安装了 imports-loader 并对连接进行了更改：

    import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic'

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
    • 0

相关问题