https://jsfiddle.net/fnethLxm/10/
$(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 observe that the plugin works fine on slides 1 and 2, but encounters issues on slide 3 with an error message "Cannot read property 'destroy' of null". I have been trying to solve this issue for a few days now but cannot figure out how to fix it. Any suggestions?