ulovliglogning.dk/assets/js/main.js

//are we running in dev mode?
var debug = document.body.getAttribute("data-env") === "development" ? true : false;

var controllerPanes = new ScrollMagic.Controller({
    globalSceneOptions: {
        //triggerHook: 'onLeave'
    }
});
var controllerAnimations = new ScrollMagic.Controller({
    globalSceneOptions: {
        //triggerHook: 'onLeave'
    }
});


function calculateOffset(){
    var containerHeight = document.getElementById("pinContainer").offsetHeight;
    var introHeight = document.getElementById("intro").offsetHeight;
    var initialOffset = (containerHeight / introHeight * 100);
    if (initialOffset > 100) {
        return "-100%";
    } else {
        return "-" + Math.floor(initialOffset) + "%";
    }
}

function createTween(section, duration ,index){
    if (index === 0) {
        var startY = calculateOffset();
    } else {
        var startY = "-0%";
    }
    var tween = TweenMax.fromTo(section, duration, {
            y: startY,
          }, {
            y: "-100%",
          })
    return tween;
}

function createTweenTimeline(){
    var sections = document.querySelectorAll("section");
    var sectionCount = sections.length;
    var sectionDurations = [];

    for (var i = 0; i < sections.length; i++) {
        sectionDurations.push(sections[i].offsetHeight/300);
    }

    var tweens = [];
    var timeline = new TimelineMax();
    for (var i = 0; i < sections.length; i++) {
        tweens.push(createTween(sections[i], sectionDurations[i], i));
        timeline.add(tweens[i]);
    }
    return {
        timeline: timeline,
        tweens: tweens
    };
}

wipeAnimation = createTweenTimeline();



// create scene for every slide
//for (var i = 0; i < sections.length - 1; i++) {
    var triggerElement = document.getElementsByClassName("container")[0];
    var panelScene = new ScrollMagic.Scene({
            triggerElement: triggerElement,
            duration: "400%",
            triggerHook: "onLeave"
        })
        .setPin(triggerElement)
        .setTween(wipeAnimation.timeline)
        .addTo(controllerPanes);
    if (debug) {
        panelScene.addIndicators()
    }
        

    window.addEventListener('resize', function(){
        wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false)
    })
//}

// for (var i = 0; i < sections.length; i++) {
//     new ScrollMagic.Scene({
//             triggerElement: sections[i]
//         })
//         .setClassToggle(sections[i], "appear")
//         .addIndicators({name: "1 - add a class"}) // add indicators (requires plugin)
//         .addTo(controllerAnimations);
// }