无法使用滚动魔法加载速度并做出反应答案

【问题标题】：unable to load velocity with scrollmagic and react无法使用滚动魔法加载速度并做出反应
【发布时间】：2017-11-22 21:03:25
【问题描述】：

我有一个 react 项目，我想将 scrollmagic 与速度插件一起使用。一旦我已经设置了一个反应项目，这就是我从终端所做的事情

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) -> 错误调用 setVelocity() 由于缺少插件'animation.velocity'。请确保包括插件/动画.velocity.js

15:56:08:694 (ScrollMagic.Scene) -> 调用 addIndicators() 时出错缺少插件'debug.addIndicators'。请确保包括插件/debug.addIndicators.js

如何让这些 Velocity 和 Indicator 函数在 reactjs 环境中与 scrollmagic 一起使用？

【问题讨论】：

标签： reactjs scrollmagic

【解决方案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",

希望这会有所帮助。

【讨论】：