ScrollMagic is not defined [using webpack]

[glennphilp]

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:

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

[1-800-jono]

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></script>

<script type='text/javascript' `src='/your-custom-code.js></script>`

[glennphilp]

I appreciate the help. Unfortunately, this doesn't resolve the issue.

See I am trying to incorporate ScrollMagic and GSAP with Webpack. I have been successful at getting Webpack to include ScrollMagic in the build.js. And according to my Webpack file I included my ScrollMagic calls after ScrollMagic.

I have even gone as far as removing my custom.js from the Webpack build and having two separate files: libs.js and init.js.

However, I still get the same error when calling:
<script src="js/libs.js"></script> // file contains in order jquery, gsap, scrollmagic
<script src="js/init.js"></script> // file contains var newScene = new ScrollMagic.Scene();

[glennphilp]

@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.

[jleifeld]

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);

[denisinla]

Review the following > #324

[HadiNiazi]

Yeah! I got the solution.
insert these code in your html file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>

This works for me. @random-yang Thanks

[Monika39-maker]

Worked for me tooo...thanks youuuuuuu