I'm using ScrollMagic to toggle a dark-mode class on the Body when scrolling past a certain Section(triggerElement). When the duration is set to '0', the toggle should be triggered, and only be re-triggered when scrolling back past the entry point. When I scroll past the end of the triggerElement for about 500 px or so (it is random), the class retoggles as if the duration is set. I have tried different things like giving each section that trigger class, but that only makes things worse. Does someone have an idea what is going on or what I am doing wrong?
` var controller = new ScrollMagic.Controller();
$('.darkModeTrigger').each(function () {
var scene = new ScrollMagic.Scene({
triggerElement: this,
duration: 0,
}).setClassToggle('.body', 'is--dark-mode')
.addIndicators({
name: 'darkmode trigger',
colorStart: 'red',
colorEnd: 'pink'
})
.addTo(controller);
});`
I'm using ScrollMagic to toggle a dark-mode class on the Body when scrolling past a certain Section(triggerElement). When the duration is set to '0', the toggle should be triggered, and only be re-triggered when scrolling back past the entry point. When I scroll past the end of the triggerElement for about 500 px or so (it is random), the class retoggles as if the duration is set. I have tried different things like giving each section that trigger class, but that only makes things worse. Does someone have an idea what is going on or what I am doing wrong?
` var controller = new ScrollMagic.Controller();