120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
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)
|
|
}
|
|
} |