CODEWITHSUNDEEP
javascriptjqueryscrollmagic
Run
Run

Reputation: 57176

ScrollMagic - Uncaught ReferenceError: ScrollScene is not defined

Why does the latest version of ScrollMagic gives me this error below?

Uncaught ReferenceError: ScrollScene is not defined

This is my test code following this guide:

$(function() {
    // Init Controller
    var scrollMagicController = new ScrollMagic();

    // 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 = new ScrollScene({
        triggerElement: '#scene',
        offset: 150 /* offset the trigger 150px below #scene's top */
    })
    .setTween(tween)
    .addTo(scrollMagicController);

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

If I am using this latest version:

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

The full error:

Uncaught ReferenceError: ScrollScene is not defined
    at HTMLDocument.<anonymous> (basic.php:66)
    at c (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.H (jquery.min.js:3)

But if I use this version (older I guess) and it works fine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js"></script>

My HTML:

  <div class="post">
        <span class="glyphicon glyphicon-grain"> </span>
        <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
    </div>

    <div class="post" id="scene">
        <span class="glyphicon glyphicon-lamp" id="animation"> </span>
        <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
    </div>

any ideas why?

EDIT:

If I use this guide from github:

// 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 = new ScrollMagic.Scene({
    triggerElement: '#scene',
    offset: 150 /* offset the trigger 150px below #scene's top */
})janpaepke-ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js
.setTween(tween)
.addTo(scrollMagicController);

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

I will get this error:

Uncaught TypeError: (intermediate value).setTween is not a function
    at HTMLDocument.<anonymous> (basic.php:70)
    at c (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.H (jquery.min.js:3)

Why!???? The documentation they have is just awful!

EDIT 2:

So I use the downloaded version:

<script src="libs/janpaepke-ScrollMagic/js/lib/greensock/TweenMax.min.js"></script>
<script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js"></script>

<!-- should be replaced with minified version when development is finished -->
<script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/jquery.ScrollMagic.min.js"></script>

<!-- should be removed when development is finished -->
<script src="libs/janpaepke-ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

I get even more errors:

 jquery.ScrollMagic.min.js:2 Uncaught TypeError: Cannot read property '_util' of undefined
    at jquery.ScrollMagic.min.js:2
    at jquery.ScrollMagic.min.js:2
    at jquery.ScrollMagic.min.js:2
(anonymous) @ jquery.ScrollMagic.min.js:2
(anonymous) @ jquery.ScrollMagic.min.js:2
(anonymous) @ jquery.ScrollMagic.min.js:2
debug.addIndicators.min.js:2 Uncaught TypeError: Cannot read property '_util' of undefined
    at debug.addIndicators.min.js:2
    at debug.addIndicators.min.js:2
    at debug.addIndicators.min.js:2
(anonymous) @ debug.addIndicators.min.js:2
(anonymous) @ debug.addIndicators.min.js:2
(anonymous) @ debug.addIndicators.min.js:2
basic.php:65 Uncaught ReferenceError: ScrollMagic is not defined
    at HTMLDocument.<anonymous> (basic.php:65)
    at c (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.H (jquery.min.js:3)

The file names and folder structure are completely a mess. confusing and inconsistent!

Upvotes: 1

Views: 8402

Answers (3)

LM17
LM17

Reputation: 147

SOLVED

I was getting those same errors and found for me it came down to placement of the CDNs.

Originally my ScrollMagic CDN was at the bottom and when I shifted it around (shown below) it solved my issue and all the console errors went away.

I had my ScrollMagic CDN at the top with my GSAP CDNs below and

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<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>

Upvotes: 0

Andrew Losseff
Andrew Losseff

Reputation: 373

Try to use

new $.ScrollMagic.Scene

instead of 

new ScrollMagic.Scene

It should help. If you use 1.3.0 version it works without '$.'

Upvotes: 2

Luis Serrano
Luis Serrano

Reputation: 131

You must import the gsap plugin too. Check the scrollmagic folders. animation.gsap.min.js

Upvotes: 2

Related Questions