unable to load velocity with scrollmagic and react - reactjs

Question

I have a react project and I'd like to use scrollmagic with the velocity plugin. Here's what I did from terminal once I already have a react project set up
npm install scrollmagic
npm install velocity-react
This is what my src/App.js looks like
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>
view source
</div>
<div className="spacer s2"></div>
</div>
);
}
}
export default App;
Then I ran my webpack command without error. Now when I look in my Chrome browser, I see a blank page. And the debug console gives me these errors:
15:56:08:694 (ScrollMagic.Scene) -> ERROR calling setVelocity() due to
missing Plugin 'animation.velocity'. Please make sure to include
plugins/animation.velocity.js
15:56:08:694 (ScrollMagic.Scene) -> ERROR calling addIndicators() due
to missing Plugin 'debug.addIndicators'. Please make sure to include
plugins/debug.addIndicators.js
How do you get these Velocity and Indicator functiosn to work with scrollmagic in a reactjs environment?

Answer 1

I came across this issue in a recent project. There are a couple of hoops you need to jump through to get it up and running.
1) I had to add aliases for all the imports I wished to make. This was done via the webpack.app.config.js file.
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) Once I had added this. I had to have the correct order of imports inside my runtime script.
import * as ScrollMagic from 'scrollmagic';
import 'TimelineMax';
import 'ScrollMagicGSAP';
import 'ScrollMagicAddIndicators';
This all worked with the following dependencies.
"gsap": "^1.20.3",
"scrollmagic": "^2.0.5",
Hope this helps.