Setting up ScrollMagic plugin

Question

I am currently learning JavaScript and jQuery and would like to start using ScrollMagic plugin.

Unfortunately I am stuck on the first hurdle- I've spent hours on this, following various tutorials online, but I just cannot get the plugin to work!?

Could you tell me what I am doing wrong here?

Many thanks in advance!

$(document).ready(function() {

  // Init ScrollMagic
  var controller = new ScrollMagic.Controller();

  // Scene 1 - pin the second section
  var pinScene01 = new ScrollMagic.Scene({
      triggerElement: '#nav',
      triggerHook: 0,
      duration: '100%'
    })
    .setPin('#nav .nav1')
    .addTo(controller);

});

.nav1 {
  height: 20vh;
  background-color: #090;
  position: relative;
  overflow: hidden;
}
.div1 {
  height: 80vh;
  background-color: #F33;
  position: relative;
  overflow: hidden;
}
.div2 {
  height: 100vh;
  background-color: #FCC;
  position: relative;
  overflow: hidden;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>

</head>

<body>

  <div class="div1">Div one content!</div>

  <div class="nav1" id="#nav">Nav bar div</div>

  <div class="div2">And more content...</div>

  <div class="div1">And a repeat!</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/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.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>




</body>

</html>

Your scripts are conflicting with one another. You only need to have the first jQuery script, and the first ScrollMagic script listed, you can remove the rest. Not sure if that is your main problem, but that is most definitely one of your problems :) — Frits, Jun 09 '16 at 12:20
he's using failsafe loading of jquery, download from googleapis, if it's not reachable, use local copy ;) — moped, Jun 09 '16 at 12:45
I copied the code from a tutorial page where it seemed to work fine. I tried removing the rest but no luck!? Could it have something to do with the positioning of the elements? Do elements have to have a parent with css position applied to them? — i76, Jun 09 '16 at 12:49

score 0 · Answer 1 · answered Jun 10 '16 at 09:41

0

I don't see any reference to the JavaScript code in your HTML file.

Include a link to it under all the other JS files and it should work.

answered Jun 10 '16 at 09:41

Ihatetomatoes

91
3

Actually, the code above was all part of one page so the JavaScript was included in the very last script tag in the body!? – i76 Jun 10 '16 at 09:56

score -1 · Answer 2 · answered Feb 22 '18 at 08:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Untitled Document</title>

</head>

<body>

<div class="div1">Div one content!</div>

<div class="nav1" id="nav">Nav bar div</div>

<div class="div2">And more content...</div>

<div class="div1">And a repeat!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/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.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<style>
body{margin: 0; padding: 0;}    
.nav1 {height: 40px;background-color: #090;position: relative;float: left; width: 100%;}
.div1 {height:1000px;background-color: #F33;position: relative;float: left; width: 100%;}
.div2 {height: 1000px;background-color: #FCC;position: relative;float: left; width: 100%;}
</style>    
    <script>
        $(document).ready(function(){
            var controller = new ScrollMagic.Controller();
            var pinScene01 = new ScrollMagic.Scene({
                  triggerElement: '#nav',
                  triggerHook: 0
                })
                .setPin('#nav', {pushFollowers: false})
                .addIndicators({
                    color: '#f00',
                    name: 'nav'
                })      
                .addTo(controller);

            });
    </script>
</body>
</html>

Setting up ScrollMagic plugin

2 Answers2