I try to implement ScrollMagic for the implementation in a new web page but I get the error:
ScrollMagic is not defined
continuously. Why does it come out if I have all the scripts implemented in the HTML?
<!DOCTYPE html>
<html>
<head>
<script src="script.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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>D.disseny</title>
</head>
<body>
<section class="panel blue">
<b>ONE</b>
</section>
<section class="panel turqoise">
<b>TWO</b>
</section>
<section class="panel green">
<b>THREE</b>
</section>
<section class="panel bordeaux">
<b>FOUR</b>
</section>
</body>
</html>
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
var slides = document.querySelectorAll("section.panel");
for (var i=0; i<slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators()
.addTo(controller);
}