93 lines
1.7 KiB
JavaScript
93 lines
1.7 KiB
JavaScript
// anime({
|
|
// targets: '#main_title',
|
|
// top: ['240px', '100px'],
|
|
// opacity: ['0', '1'],
|
|
// easing: 'easeInOutQuad'
|
|
// });
|
|
//
|
|
// anime({
|
|
// targets: '#hand',
|
|
// top: ['0px', '100px'],
|
|
// easing: 'easeInOut'
|
|
// });
|
|
//
|
|
// anime({
|
|
// targets: '#cover h2',
|
|
// opacity: ['0.5', '1'],
|
|
// easing: 'easeInOut'
|
|
// });
|
|
// anime({
|
|
// targets: '#phone-watches-1',
|
|
// left: ['-5vw', '0vw'],
|
|
// top: ['50vh', '45vh'],
|
|
// easing: 'easeInOut'
|
|
// });
|
|
|
|
// Add timeline
|
|
let tl1 = anime.timeline({autoplay: false});
|
|
|
|
let s1a2 = {
|
|
targets: '#hand',
|
|
top: ['0px', '100px'],
|
|
easing: 'easeInOut'
|
|
};
|
|
|
|
// Add children
|
|
tl1.add(s1a2);
|
|
|
|
let controller = new ScrollMagic.Controller();
|
|
|
|
//Add first scrollmagic scene
|
|
let scene1 = new ScrollMagic.Scene({
|
|
triggerElement: "#cover",
|
|
triggerHook: 0.5,
|
|
reverse: false
|
|
})
|
|
|
|
// Add debug indicators
|
|
.addIndicators({
|
|
colorTrigger: "black",
|
|
colorStart: "blue",
|
|
colorEnd: "red",
|
|
indent: 10
|
|
})
|
|
|
|
// Trigger animation timeline
|
|
.on("progress", function (event) {
|
|
tl1.seek(tl2.duration * event.progress);
|
|
})
|
|
.addTo(controller);
|
|
|
|
|
|
|
|
|
|
//Add second scrollmagic scene
|
|
let scene2 = new ScrollMagic.Scene({
|
|
triggerElement: "#two",
|
|
duration: 4500,
|
|
triggerHook: 0,
|
|
})
|
|
|
|
// Add debug indicators
|
|
.addIndicators({
|
|
colorTrigger: "black",
|
|
colorStart: "blue",
|
|
colorEnd: "red",
|
|
indent: 10
|
|
})
|
|
|
|
// Trigger animation timeline
|
|
//Use scroll position to play animation
|
|
.on("progress", function (event) {
|
|
console.log('tl2.duration', tl2.duration)
|
|
console.log('event.progress', event.progress)
|
|
tl2.seek(tl2.duration * event.progress);
|
|
})
|
|
|
|
.setPin('#two')
|
|
.addTo(controller);
|
|
|
|
|
|
let twoHeight = document.getElementById("two").clientHeight;
|
|
console.log('section two Height: ' + twoHeight);
|