how to fix the script?

Question

$(document).ready(function() {
    parallaxAuto()
});
function parallaxAuto() {
    var viewer       = document.querySelector('.viewer.active'),
    frame_count  = 5,
    offset_value = 500;

    // init controller
    var controller = new ScrollMagic.Controller({
      globalSceneOptions: {
        triggerHook: 0,
        reverse: true
      }
    });

    // build pinned scene
    var scene = new ScrollMagic.Scene({
      triggerElement: '#sticky',
      duration: (frame_count * offset_value) + 'px',
      reverse: true
    })
    .setPin('#sticky')
    //.addIndicators()
    .addTo(controller);

    // build step frame scene
    for (var i = 1, l = frame_count; i <= l; i++) {
      new ScrollMagic.Scene({
          triggerElement: '#sticky',
          offset: i * offset_value
        })
        .setClassToggle(viewer, 'frame' + i)
        //.addIndicators()
        .addTo(controller);
    }

    $(".right_arrr").click(function(){
        var block = $(this).siblings('.secondSlider');
        el = block.find(".active");
        elNum = el.attr("data-num");
        if(elNum < block.find('.slide').length) {
            elNum++;
        } else {
            elNum=1;
        }
        hideShow(elNum, block);
        alert('slide №' + elNum)
        scene = scene.destroy(true);
        scene = null;
        controller.destroy(true);
        controller = null;
        parallaxAuto();
    });
    $(".left_arrr").click(function(){
        var block = $(this).siblings('.secondSlider');
        el = block.find(".active");
        elNum = el.attr("data-num");
        if(elNum > 1) {
            elNum--;
        } else {
            elNum=block.find('.slide').length;
        }
        hideShow(elNum, block);
        scene = scene.destroy(true);
        scene = null;
        controller.destroy(true);
        controller = null;
        parallaxAuto();
    });
    function hideShow(num, block) {
        block.find("div.active").removeClass("active").animate({ opacity: 0,},300);
        block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300);
    }
};

You can see that on 1 and 2 slide plugin work out fine, but on slide 3 it does not work. and error "Cannot read property 'destroy' of null" A few days longer I sit and I can not understand how to fix this?

score 2 · Accepted Answer · answered Apr 26 '16 at 06:51

2

I see 2 issues:

you're setting the scene and the controller to null on every right/left click, and require re-init of it re-calling parallaxAuto;
every time you call parallaxAuto you re-bind the listeners.

I took the freedom to rewrite it for you so the listeners will be bound only once: https://jsfiddle.net/j6u6wp7x/. I just isolated the part in which you re-init the controller and the scene so you can call it at the end of the click without re-binding the events.

answered Apr 26 '16 at 06:51

reallynice

1,289
2
21
41

I can ask another question? @reallynice – Александр Котов Apr 26 '16 at 07:38
If it's about making some more corrections to this script, yes. Otherwise it'd be better to make a new question. – reallynice Apr 26 '16 at 07:42
How to make the transition to a new slide it all started from the beginning? And now if you go to slide 2 and 3 will be shown how we settled on one slide @reallynice – Александр Котов Apr 26 '16 at 08:00
This looks an improvement about the script, and honestly I don't understand the request. Maybe you should think more about how to do it and eventually make a new question. – reallynice Apr 26 '16 at 09:08

how to fix the script?

1 Answers1