On my website the ScrollMagic scene trigger hook positions are stored in an array slideOffsets = [] which is populated on initialisation using

var scene;
for (var i=0; i<slides.length; i++) {
    //Get offsets
    if(i != 1) {
        scene = new ScrollMagic.Scene({
                triggerElement: slides[i]
            })

            .setPin(slides[i])
            .addIndicators() // INDICATORS FROM PLUGINS
            .addTo(controller);
    } else {
        scene = new ScrollMagic.Scene({
                triggerElement: slides[i], duration: "10%"
            })
            .setPin(slides[i])
            .addIndicators() // INDICATORS FROM PLUGINS
            .addTo(controller);
    }
    slideOffsets.push(Math.ceil(scene.triggerPosition()));
    scenes.push(scene);

}

Then the function attached to each <a> element scrolls to the respective position. This all works perfectly, but after resizing the window this does not work. I have the scenes stored in an array so I can access them, but even after iterating through them and re-storing hook positions after resizing, the returned positions simply do not reflect where the hooks really are on the page, even after trying to take away/add the duration of the scene too.

$(window).on("resize", function() {
    slideOffsets = [];

    for (var i=0; i<slides.length; i++) {
        slideOffsets.push(Math.ceil(scenes[i].triggerPosition() - scenes[i].duration()));
    }
    console.log("regathering done");
});

(btw im aware that this constantly runs as the user is resizing the window, however I'd like to resolve this issue first)

Any ideas? I've been crawling through the documentation for a long time now without any success, .triggerPosition(), .scrollOffset() seem to be doing the exact same thing but neither of them work properly after resizing.

On my website the ScrollMagic scene trigger hook positions are stored in an array slideOffsets = [] which is populated on initialisation using

var scene;
for (var i=0; i<slides.length; i++) {
    //Get offsets
    if(i != 1) {
        scene = new ScrollMagic.Scene({
                triggerElement: slides[i]
            })

            .setPin(slides[i])
            .addIndicators() // INDICATORS FROM PLUGINS
            .addTo(controller);
    } else {
        scene = new ScrollMagic.Scene({
                triggerElement: slides[i], duration: "10%"
            })
            .setPin(slides[i])
            .addIndicators() // INDICATORS FROM PLUGINS
            .addTo(controller);
    }
    slideOffsets.push(Math.ceil(scene.triggerPosition()));
    scenes.push(scene);

}

Then the function attached to each <a> element scrolls to the respective position. This all works perfectly, but after resizing the window this does not work. I have the scenes stored in an array so I can access them, but even after iterating through them and re-storing hook positions after resizing, the returned positions simply do not reflect where the hooks really are on the page, even after trying to take away/add the duration of the scene too.

$(window).on("resize", function() {
    slideOffsets = [];

    for (var i=0; i<slides.length; i++) {
        slideOffsets.push(Math.ceil(scenes[i].triggerPosition() - scenes[i].duration()));
    }
    console.log("regathering done");
});

(btw im aware that this constantly runs as the user is resizing the window, however I'd like to resolve this issue first)

Any ideas? I've been crawling through the documentation for a long time now without any success, .triggerPosition(), .scrollOffset() seem to be doing the exact same thing but neither of them work properly after resizing.

• javascript
• jquery
• scrollmagic

1 Answer 1

I finally managed to solve to problem, what I had to do was iterate through the saved scenes and individually remove and reset pin, refresh scene and THEN ask for the scrollOffset positions of each:

$(window).on("resize", function() {
    slideOffsets = [];
    for (var i = 0; i < scenes.length; i++) {
        scenes[i].removePin(true);
        scenes[i].setPin(slides[i]);
        scenes[i].refresh();
        slideOffsets.push(Math.ceil(scenes[i].scrollOffset()));
    }
});