So i've been using ScrollMagic.js with GSAP.js and using the .setClassToggle for a side navigation active state as you scroll down.

It adds the 'active' class, but does not remove the previous one, until you scroll up again, then it removes it. But the demo shows it toggling both ways. This is my code:

$(function () {

  var controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({triggerElement: "#Home"})
              .setClassToggle(".side-nav a.home", "active")                
              .addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#Overview"})
              .setClassToggle(".side-nav a.overview", "active")
              .addTo(controller);
});

JS Fiddle Link: /

So i've been using ScrollMagic.js with GSAP.js and using the .setClassToggle for a side navigation active state as you scroll down.

It adds the 'active' class, but does not remove the previous one, until you scroll up again, then it removes it. But the demo shows it toggling both ways. This is my code:

$(function () {

  var controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({triggerElement: "#Home"})
              .setClassToggle(".side-nav a.home", "active")                
              .addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#Overview"})
              .setClassToggle(".side-nav a.overview", "active")
              .addTo(controller);
});

JS Fiddle Link: https://jsfiddle/2sx91ya6/

• javascript
• scrollmagic

• Can you provide fiddle with your code? – trkaplan Commented Sep 17, 2016 at 18:03
• Sure thing: jsfiddle/2sx91ya6 – C22_Gh02t Commented Sep 17, 2016 at 19:55

2 Answers 2

• Specify a duration (height of scene) property globally

  var controller = new ScrollMagic.Controller({ globalSceneOptions: {duration: 561} });

  https://jsfiddle/2sx91ya6/4/

• or for each scene seperately.

  new ScrollMagic.Scene({ triggerElement: "#Home", duration: 561 })

  https://jsfiddle/trkaplan/2sx91ya6/5/

If scene heights are dynamic/or you don't want to specify manually, see the example here to calculate duration for each scene.

Specify that the element size to be 100%.

    var controller = new ScrollMagic.Controller({
    globalSceneOptions: {duration: "100%"}
});

I forked your original JS Fiddle so you can see this in action here: https://jsfiddle/grayayer/1v6fusye/

this is described in the ScrollMagic documentation here: http://scrollmagic.io/examples/basic/responsive_duration.html