62 lines
1013 B
JavaScript
62 lines
1013 B
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, '-=10');
|
|
|
|
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("enter", function (event) {
|
|
tl1.play();
|
|
})
|
|
|
|
.addTo(controller);
|