The jQuery used in this code successfully adds a new class running to elements with the class paused when scrolling to the trigger element in all browsers except IE11.
The trigger element is set on a div. It works in Firefox, Safari, and Chrome by adding the class, but in IE11, it doesn't respond to the trigger.
Could this be an issue related to IE11 compatibility with jQuery .ready function?
$(document).ready(function() {
var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger1"})
.setClassToggle(".svg1 .paused", "running")
.addTo(controller);
var scene3 = new ScrollMagic.Scene({triggerElement: "#trigger3"})
.setClassToggle(".svg3 .paused", "running")
.addTo(controller);
});
$(document).ready(function() {
if ($(window).width() <= 991) {
var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger5"})
.setClassToggle(".svg2 .paused", "running")
.addTo(controller);
var scene4 = new ScrollMagic.Scene({triggerElement: "#trigger6"})
.setClassToggle(".svg4 .paused", "running")
.addTo(controller);
}
});
$(document).ready(function() {
if ($(window).width() >= 992) {
var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2"})
.setClassToggle(".svg2 .paused", "running")
.addTo(controller);
var scene4 = new ScrollMagic.Scene({triggerElement: "#trigger4"})
.setClassToggle(".svg4 .paused", "running")
.addTo(controller);
}
});