Every change done with magicscroll and greensock get reset when I hit the bottom of the page

Question

I'm building a side dot navigation (with four dots) using ScrollMagic and Greensock. Everything work fine until I scroll to the bottom of the page. Then, when i scroll up, my dots are getting messed up, and they wont work right(the first dot is getting highlighted when I'm right above the bottom of the page), until i hit the top of the page and then start scrolling down again.

Also, setClassToggle works perfectly in all locations, no matter if I'm scrolling from the bottom of the page or the top.

$(document).ready(function(){
    var controller = new  ScrollMagic.Controller();
    var timeline = new TimelineLite();
    var setMultipleClasses0 = TweenLite.set($(['#home_b', '#services_b', 
  '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass0=TweenLite.set($("#about_b"),{
        className: "dot name-active"
    });
    timeline.add(setMultipleClasses0).add(setSingleClass0);
    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#about'
    })
    .setTween(timeline)
    .setClassToggle('#about', 'fade-in')
    .addTo(controller);
    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
            var timeline1 = new TimelineLite();
    var setMultipleClasses1 = TweenLite.set($(['#home_b', '#about_b', 
   '#contact_b']), {
        className: "dot name-inactive"
    });
    var setSingleClass1=TweenLite.set($("#services_b"),{
        className: "dot name-active"
    });
            timeline1.add(setMultipleClasses1).add(setSingleClass1);
    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#s_id',
        triggerHook: 0.7
    })
    .setTween(timeline1)
    .setClassToggle('#s_id', 'fade-out')
    .addTo(controller);
    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
            var timeline2 = new TimelineLite();
     var setMultipleClasses2 = TweenLite.set($(['#about_b', '#services_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass2=TweenLite.set($("#home_b"),{
        className: "dot name-active"
    });
            timeline2.add(setMultipleClasses2).add(setSingleClass2);

    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#h_id',
         triggerHook: "0.00"
    })
    .setTween(timeline2)
    .setClassToggle('#h_id', 'fade-out')
    .addTo(controller);

    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
            var timeline3 = new TimelineLite();
     var setMultipleClasses3 = TweenLite.set($(['#home_b', '#services_b', '#about_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass3=TweenLite.set($("#contact_b"),{
        className: "dot name-active"
    });

            timeline3.add(setMultipleClasses3).add(setSingleClass3);


    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#c_id'

    })
    .setTween(timeline3)
    .setClassToggle('#c_id', 'fade-out')
    .addTo(controller);

  });

Answer 1

SOLVED guys.

My dots were used in HTML like this:

                <li><a href="#home" id="home_b" class="dot name-inactive"><span>Home</span></a></li>
                <li><a href="#about" id="about_b" class="dot name-inactive"><span>About</span></a></li>
                <li><a href="#services" id="services_b" class="dot name-inactive"><span>Services</span></a></li>
                <li><a href="#contact" id="contact_b" class="dot name-inactive"><span>Contact</span></a></li>

The problem was solved by declaring the Scenes with the exact order i used my HTML file. Below is the working code.

 $(document).ready(function(){


      var controller = new  ScrollMagic.Controller();
                    var timeline = new TimelineLite();




     var setMultipleClasses2 = TweenLite.set($(['#about_b', '#services_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass2=TweenLite.set($("#home_b"),{
        className: "dot name-active"
    });

            timeline.add(setMultipleClasses2).add(setSingleClass2);


    var ourScene = new ScrollMagic.Scene({
       triggerElement:"#h_id"
    })
    .setTween(timeline)
    .setClassToggle('#h_id', 'fade-out')
    .addTo(controller);

    /*----------------------------------------*/


        var controller = new  ScrollMagic.Controller();

         var timeline = new TimelineLite();

    // Create a .set() tween to add "red and bold" classes
    var setMultipleClasses0 = TweenLite.set($(['#home_b', '#services_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass0=TweenLite.set($("#about_b"),{
        className: "dot name-active"
    });

    timeline.add(setMultipleClasses0).add(setSingleClass0);

    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#about'


    })
    .setTween(timeline)
    .setClassToggle('#about', 'fade-in')
    .addTo(controller);
    /*----------------------------------------*/

            var controller = new  ScrollMagic.Controller();
                    var timeline = new TimelineLite();



     var setMultipleClasses1 = TweenLite.set($(['#home_b', '#about_b', '#contact_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass1=TweenLite.set($("#services_b"),{
        className: "dot name-active"
    });

            timeline.add(setMultipleClasses1).add(setSingleClass1);


    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#s_id',
        triggerHook: 0.7

    })
    .setTween(timeline)
    .setClassToggle('#s_id', 'fade-out')
    .addTo(controller);
    /*----------------------------------------*/



            var controller = new  ScrollMagic.Controller();
                    var timeline = new TimelineLite();




     var setMultipleClasses3 = TweenLite.set($(['#home_b', '#services_b', '#about_b']), {
        className: "dot name-inactive"
    });

    var setSingleClass3=TweenLite.set($("#contact_b"),{
        className: "dot name-active"
    });

            timeline.add(setMultipleClasses3).add(setSingleClass3);


    var ourScene = new ScrollMagic.Scene({
        triggerElement:'#c_id'

    })
    .setTween(timeline)
    .setClassToggle('#c_id', 'fade-out')
    .addTo(controller);




});