94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
//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);
|
|
// }
|