Scroll Magic add indicators plugin not working

Question

Scroll Magic add indicators plugin not working

4.9k views Asked by Quasar At 14 September 2024 at 21:49

I have started using the ScrollMagic library recently. When I tried using the addIndicators plugin in my program, it did not work properly. The trigger indicator is given by a very small blue tick (same with start and end indicators). My code is as follows.

HTML :

<body>
    <div id="container">
        <section id="landing">                                                              
        </section>
        <section id="home">             
        </section>
    </div>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> 
</body>

CSS :

            body, html {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                width: 300%;
                overflow-y: hidden;
                overflow-x: scroll;
                margin: auto;   
                white-space: nowrap;
                font-size: 0;
            }
            #container {
                height: 100%;
                width: 100%;
                display:block;  
            }
            section {
                position: relative;
                display: inline-block;
                text-align: center;
                height: 100vh;
                width: 150vw;
            }
            #landing {
                background-color: yellow;
            }
            #home {
                background-color: orange;
            }

JQuery :

var controller = new ScrollMagic.Controller({vertical: false});
var scene = new ScrollMagic.Scene({triggerElement: "#landing", duration: "150%", triggerHook: 0})
            .setPin("#landing")
            .addIndicators()                
            .addTo(controller);

I tried the code without the container too, but it did not work. What do I need to add, or what wrong order of code have I written?

https://jsfiddle.net/zjapLcx4/1/

Original Q&A

There are 2 answers

Rushikesh Aundhakar On 29 January 2023 at 07:24

I had similar problem like this, and it was solved when I placed ScrollMagic CDN on any of the GSAP CDN and it worked like a charm, So my suggestion for people with same problem like above is try moving the placement of CDN. I hope it works for you and others:)

**Dejan.S** · Accepted Answer · 2017-01-03 12:21:55

You had font-size: 0;, (I took the liberty to clean up your code a bit). I also changed the trigger to #home instead just for clarity of the trigger, start and end indicators.

jsfiddle

html

<div id="container">
  <section id="landing"></section>
  <section id="home"></section>
</div>

css

body {
  width: 300%;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}

js

var controller = new ScrollMagic.Controller({
  vertical: false
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#home",
    duration: "150%"
  })
  .setPin("#home")
  .addIndicators()
  .addTo(controller);

TechQA.

Scroll Magic add indicators plugin not working

There are 2 answers

Related Questions in JQUERY

Related Questions in SCROLLMAGIC

Popular Questions

Popular Tags

Trending Questions