CODEWITHSUNDEEP
reactjsscrollmagic
learningtech
learningtech

Reputation: 33705

unable to load velocity with scrollmagic and react

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>
  <a href="#" className="viewsource">view source</a>
</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?

Upvotes: 0

Views: 612

Answers (1)

justuff
justuff

Reputation: 238

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.

Upvotes: 2

Related Questions