Scrollmagic: ScrollMagic 2.0.5 - Cannot read property 'Scene' of undefined & ScrollMagic.Scene(...).setTween is not a function

Created on 13 Feb 2017 · 7Comments · Source: janpaepke/ScrollMagic

These are what I include in my html head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

Then tons of errors I get!

animation.gsap.js:50 (animation.gsap) -> ERROR: The ScrollMagic main module could not be found. Please make sure it's loaded before this plugin or use an asynchronous loader like requirejs.
(anonymous) @ animation.gsap.js:50
(anonymous) @ animation.gsap.js:39
(anonymous) @ animation.gsap.js:41
animation.gsap.js:93 Uncaught TypeError: Cannot read property 'Scene' of undefined
    at animation.gsap.js:93
    at animation.gsap.js:39
    at animation.gsap.js:41
jquery.min.js:2 Uncaught TypeError: ScrollMagic.Scene(...).setTween is not a function
    at HTMLDocument.<anonymous> (basic.php:103)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

My code:

// Version 2.0.5
    // Init Controller
    var scrollMagicController = new ScrollMagic.Controller();

    // Create Animation for 0.5s
    var tween = TweenMax.to('#animation', 0.5, {
        backgroundColor: 'rgb(255, 39, 46)',
        scale: 7,
        rotation: 360
    });

    // Create the Scene and trigger when visible with ScrollMagic
    var scene1 = ScrollMagic.Scene({
        triggerElement: '#scene',
        offset: 150 /* offset the trigger 150px below #scene's top */
    })
    .setTween(tween);

    // Add Scene to ScrollMagic Controller
    scrollMagicController.addScene(scene1);

    // Add debug indicators fixed on right side
    scene1.addIndicators();

Why? How can fix this?

Source

lautiamkok

Most helpful comment

Why would you not post the answer to this? We are coming here for that

thomasfoster on 17 Jun 2017

👍22 😄3

All 7 comments

Have it sorted myself now. Thanks!

lautiamkok on 13 Feb 2017

👎16 😕8 👀1

how?

petres-a on 28 Mar 2017

Why would you not post the answer to this? We are coming here for that

thomasfoster on 17 Jun 2017

👍22 😄3

How did you resolve the issue @lautiamkok ? Please share, as you're helping a community falling into the same problem :)

pixelcure on 23 Jun 2017

I solved similar situation by importing animation.gsap.min.js after ScrollMagic.min.js

carlosost on 20 Jul 2017

👍7 🎉4

As mentioned in lots of other threads...if your having errors with the installation, make sure you have the development versions of the source code. Don't use minified as the debug console features are removed in the minified version.

Then check the console. Go from there.

mattjbrent on 21 Jul 2017

This can also expose itself as a Cannot read property 'to' of undefined error.

Needs GSAP to be loaded before ScrollMagic as well.

Script imports should be in this order:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

Working example as of 2.0.5:

<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 200vh;
  font-family: sans-serif;
  padding-top: 500px;
}

.spacer {
  height: 100px;
  outline: 1px dotted;
}
</style>
</head>
<body>

<div class="spacer s1"></div>
<div id="trigger2" class="spacer s1"></div>
<div class="spacer s0"></div>
<div id="animate2" class="box1 black">
  <p>Smurf me!</p>
  <a href="#" class="viewsource">view source</a>
</div>
<div class="spacer s2"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

<script>
// init controller
var controller = new ScrollMagic.Controller()

new ScrollMagic.Scene({triggerElement: `#trigger2`, duration: 300})
  // animate color and top border in relation to scroll position
  .setTween(`#animate2`, {borderTop: `30px solid white`, backgroundColor: `blue`, scale: 0.7}) // the tween durtion can be omitted and defaults to 1
  .addIndicators({name: `2 (duration: 300)`}) // add indicators (requires plugin)
  .addTo(controller)
</script>

</body>
</html>