.setClassToggle in ScrollMagic does not remove class when scrolling down

Question

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.net/2sx91ya6/

Answer 1

• Specify a duration (height of scene) property globally

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

  https://jsfiddle.net/2sx91ya6/4/

• or for each scene seperately.

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

  https://jsfiddle.net/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.