ScrollMagic in Webpack #637

Closed
Tatenda opened this Issue Jan 11, 2017 · 3 comments

Projects

None yet

3 participants

@Tatenda
Tatenda commented Jan 11, 2017

My project uses webpack. I have no idea how to get scrollmagic to work with webpack. I have required webpack in my project, but when I try to use it inside my angular controllers, i get an error message as below:

client\app\components\directives\js\landingSection.js
14:11 error 'ScrollMagic' is not defined no-undef

Can anyone please help me with steps to get it working in my webpack.

@archae0pteryx
archae0pteryx commented Jan 13, 2017 edited

@Tatenda - the only way i've been able to successfully load into my webpack'd situation (angular-cli webpack) is by including a script import in my index.html

<!-- index.html -->
<script src="path/to/scrollmagic"></script>

I've tried loading via angular-cli.json to no avail. Beware of Firefox console error however. There is a MIME type mismatch bug... I haven't sussed that one out though...

@hendrikeng
hendrikeng commented Jan 14, 2017 edited

@Tatenda

For me it works with normal import in webpack:

import ScrollMagic from 'scrollmagic';

const controller = new ScrollMagic.Controller(); /* [1] */
const elements = document.getElementsByClassName('c-scene');

for (let i = 1; i <= elements.length; i += 1) { /* [2] */
  const fadeScene = new ScrollMagic.Scene({ // eslint-disable-line
    triggerElement: `.js-scene-0${i}`, /* [3] */
    reverse: false, /* [4] */
    // duration: '100%', /* [5] */
    triggerHook: 1, /* [6] */
  })
  .setClassToggle(`.js-scene-0${i}`, 'fade-in') /* [7] */
  .addIndicators({
    name: `fade scene 0${i}`,
    colorTrigger: 'red',
    colorStart: 'blue',
    colorEnd: 'purple',
  }) // requires debuging plugin
  .addTo(controller);
}

@Tatenda
Tatenda commented Jan 15, 2017

Hi guys. I managed to find a way to go around this. I did the following:

plugins: [ new webpack.ProvidePlugin({ ScrollMagic:'scrollmagic', }) ],

I added the above code in the webpack.config file. I did not even need to require anything in my my entry.js. I even did that with JQuery and they are both working perfectly.

@Tatenda Tatenda closed this Jan 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment