74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
var controllerPanes = new ScrollMagic.Controller({
|
|
globalSceneOptions: {
|
|
//triggerHook: 'onLeave'
|
|
}
|
|
});
|
|
var controllerAnimations = new ScrollMagic.Controller({
|
|
globalSceneOptions: {
|
|
//triggerHook: 'onLeave'
|
|
}
|
|
});
|
|
|
|
// get all sections
|
|
var sections = document.querySelectorAll("section");
|
|
var sectionCount = sections.length;
|
|
var sectionDurations = [];
|
|
|
|
var wipeAnimation = new TimelineLite()
|
|
for (var i = 0; i < sections.length; i++) {
|
|
sectionDurations.push(sections[i].offsetHeight/300);
|
|
// fromY = i == 0 ? "-100%" : "0";
|
|
// toY = /*i == sections.length - 1 ? "0" :*/ "-100%";
|
|
// wipeAnimation = wipeAnimation.fromTo(sections[i], sectionDurations[i], {
|
|
// y: fromY,
|
|
// }, {
|
|
// y: toY,
|
|
// })
|
|
}
|
|
|
|
var wipeAnimation = new TimelineLite()
|
|
.fromTo(sections[0], sectionDurations[0], {
|
|
y: "-0%",
|
|
}, {
|
|
y: "-100%",
|
|
}).fromTo(sections[1], sectionDurations[1], {
|
|
y: "-0%",
|
|
}, {
|
|
y: "-100%",
|
|
}).fromTo(sections[2], sectionDurations[2], {
|
|
y: "-0%",
|
|
}, {
|
|
y: "-100%",
|
|
}).fromTo(sections[3], sectionDurations[3], {
|
|
y: "-0%",
|
|
}, {
|
|
y: "-100%",
|
|
}).fromTo(sections[4], sectionDurations[4], {
|
|
y: "-0%",
|
|
}, {
|
|
y: "-100%",
|
|
})
|
|
|
|
|
|
// create scene for every slide
|
|
//for (var i = 0; i < sections.length - 1; i++) {
|
|
var triggerElement = document.getElementsByClassName("container")[0];
|
|
new ScrollMagic.Scene({
|
|
triggerElement: triggerElement,
|
|
duration: "400%",
|
|
triggerHook: "onLeave"
|
|
})
|
|
.setPin(triggerElement)
|
|
.setTween(wipeAnimation)
|
|
.addIndicators() // add indicators (requires plugin)
|
|
.addTo(controllerPanes);
|
|
//}
|
|
|
|
// 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);
|
|
// }
|