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

lautiamkok commented 7 years ago

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?

lautiamkok commented 7 years ago

Have it sorted myself now. Thanks!

petres-a commented 7 years ago

how?

thomasfoster commented 7 years ago

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

pixelcure commented 7 years ago

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

carlosost commented 7 years ago

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

mattjbrent commented 7 years ago

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.

corysimmons commented 6 years ago

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>

lukeman17 commented 2 years ago

SOLVED...

I had major issues with the same errors in the console and after some research it came down to the placement of each CDN.

For Me

I placed the ScrollMagic CDN before any of the GSAP CDNs and it works perfect.

`

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script type="module" src="./script.js"></script>`

janpaepke / ScrollMagic

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