Question

我有一个反应项目，我想使用scrollmagic和velocity插件。这是我在设置了反应项目后从终端做的事情

npm install scrollmagic
npm install velocity-react

这就是我src/App.js的样子

import React, { Component } from 'react';
import ScrollMagic from 'scrollmagic';
import Velocity from 'velocity-react';


class App extends Component {
  componentDidMount() {

  // init controller
  var controller = new ScrollMagic.Controller();

  // build scene
  var scene = new ScrollMagic.Scene({triggerElement: "#trigger"})
          // trigger a velocity opaticy animation
          .setVelocity("#animate", {opacity: 0}, {duration: 400})
          .addIndicators() // add indicators (requires plugin)
          .addTo(controller);
  }
  render() {
    return (
        <div>
        <div className="spacer s2"></div>
<div className="spacer s2"></div>
<div id="trigger" className="spacer s0"></div>
<div id="animate" className="box1 blue">
  <p>Now you see me...</p>
  <a href="#" className="viewsource">view source</a>
</div>
<div className="spacer s2"></div>
      </div>
    );
  }
}

export default App;

然后我毫无错误地运行了webpack命令。现在，当我查看Chrome浏览器时，我看到一个空白页面。调试控制台给了我这些错误：

15：56：08：694（ScrollMagic.Scene） - ＆gt; ERROR调用setVelocity（）由于   缺少插件'animation.velocity'。请确保包含   插件/ animation.velocity.js

15：56：08：694（ScrollMagic.Scene） - ＆gt; ERROR调用addIndicators（）到期   缺少插件'debug.addIndicators'。请确保包含   插件/ debug.addIndicators.js

如何让这些Velocity和Indicator功能在reactjs环境中使用scrollmagic？

Answer 1

我在最近的一个项目中遇到了这个问题。您需要跳几个圈来使其启动并运行。

1）我必须为我要进行的所有导入添加别名。这是通过webpack.app.config.js文件完成的。

module.exports = options => ({
  resolve: {
    alias: {
      "TweenMax": "gsap/src/uncompressed/TweenMax.js",
      "TimelineMax": "gsap/src/uncompressed/TimelineMax.js",
      "ScrollToPlugin": "gsap/src/uncompressed/plugins/ScrollToPlugin.js",
      "ScrollMagic": "scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
      "ScrollMagicAddIndicators": "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js",
      "ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
    }
  }
});

2）添加完之后。我必须在运行时脚本中具有正确的导入顺序。

import * as ScrollMagic from 'scrollmagic';
import 'TimelineMax';
import 'ScrollMagicGSAP';
import 'ScrollMagicAddIndicators';

这一切都与以下依赖项一起工作。

"gsap": "^1.20.3",
"scrollmagic": "^2.0.5",

希望这会有所帮助。

无法使用scrollmagic加载速度并做出反应

1 个答案: