ScrollMagic is not defined [using webpack]

Created on 15 Feb 2018 · 8Comments · Source: janpaepke/ScrollMagic

Repo with issue: https://[email protected]/gphilp/ihatetomatoes.git

Download the repo
Run npm install
cd to project run foundation watch

Error: Uncaught ReferenceError: ScrollMagic is not defined

Any help resolving this would be greatly appreciated.

I thought the error might have had something to do with jQuery. So I tested ScrollMagic.Controller outside of any jQuery reference and still get the same not defined error.

Is the issue created because the new ScrollMagic.Controller triggering before ScrollMagic has fully loaded? This shouldn't be the issue though since ScrollMagic and plugins come before the Controller init.

So far I have successfully added ScrollMagic, animation.gsap, and debug with webpack by using the alias config within the gulpfile.

Site structure:

- assets
-- js
--- app.js [imports]
--- libs
---- iht-awwwards.js [custom javascript]
---- scrollmagic.js [import scrollmagic and plugins]

Source

glennphilp

Most helpful comment

You can import the library directly in the file and it works perfectly:

// Import ScrollMagic library
import ScrollMagic from 'scrollmagic';

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

// create a scene
new ScrollMagic.Scene({
  duration: 1400, //scroll distance for scene
  offset: 900 //start this scene after scrolling for offset
})
.setPin("#some-div") //pins the element for the scenes duration
.addTo(controller);

jleifeld on 18 Apr 2018

👍8

All 8 comments

This is probably because your custom js code is above ScrollMagic library. In your HTML it should be:
<script type='text/javascript' src='/ScrollMagic.min.js>

random-yang on 25 Feb 2018

👎21 👍3 ❤2

@OfficialYoungX, thank you for your input. I too realize I can add GSAP and ScrollMagic with script tags and CDN. This isn't my goal. My goal is to have it included in my build process for a single JS file.

glennphilp on 26 Feb 2018

👍5

You can import the library directly in the file and it works perfectly:

// Import ScrollMagic library
import ScrollMagic from 'scrollmagic';

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

// create a scene
new ScrollMagic.Scene({
  duration: 1400, //scroll distance for scene
  offset: 900 //start this scene after scrolling for offset
})
.setPin("#some-div") //pins the element for the scenes duration
.addTo(controller);

jleifeld on 18 Apr 2018

👍8

Review the following > https://github.com/janpaepke/ScrollMagic/issues/324