ulovliglogning.dk/assets/js/main.js

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

document.body.style.height = document.body.offsetHeight + "px";

var controllerPanes = new ScrollMagic.Controller({
    globalSceneOptions: {
        //triggerHook: 'onLeave'
    }
});
// var controllerAnimations = new ScrollMagic.Controller({
//     globalSceneOptions: {
//         //triggerHook: 'onLeave'
//     }
// });
var md = new MobileDetect(window.navigator.userAgent);
var isDesktop = md.mobile() === null ? true : false;

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,
            force3D: true,
          }, {
            y: "-100%",
            force3D: true
          })
    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
    };
}

function toggleDataAttr(attribute, toggle){
    if (toggle) {
        document.body.setAttribute("data-" + attribute, "enabled");
    } else {
        document.body.setAttribute("data-" + attribute, "disabled");
    }
}

//only use the pane animations on desktop
if (isDesktop) {
    toggleDataAttr("scrollmagicPanes", true);
    wipeAnimation = createTweenTimeline();

    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()
    }   
    wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false);

    window.addEventListener('resize', function(){
        //document.body.style.height = document.body.offsetHeight + "px";
        console.log("pinContainer " + document.getElementById("pinContainer").offsetHeight)
        console.log("body " + document.body.offsetHeight)
        console.log("resize fired!")
        // if (document.body.offsetHeight - document.getElementById("pinContainer").offsetHeight > 100) {
        //     console.log("adjusting offset!");
        //     wipeAnimation.tweens[0].updateTo({startAt: {y: calculateOffset()}}, false)
        // }
    })
} else {
    toggleDataAttr("scrollmagicPanes", false);
}

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