85 lines
1.6 KiB
JavaScript
85 lines
1.6 KiB
JavaScript
// Color palette variables
|
|
let dark = '#252525';
|
|
let mid = '#888';
|
|
let light = 'rgba(255, 255, 255, 0.4)';
|
|
|
|
// Add scrollmagic controller
|
|
let controller = new ScrollMagic.Controller();
|
|
|
|
//------------------
|
|
//TIMELINE 1
|
|
//------------------
|
|
|
|
// Add timeline
|
|
let tl1 = anime.timeline({autoplay: false});
|
|
|
|
// Add animations
|
|
let s1a1 = {
|
|
targets: '#main_title .elem',
|
|
opacity: 1,
|
|
translateX: {
|
|
value: [250, 0],
|
|
duration: 800
|
|
},
|
|
rotate: {
|
|
value: [90, 0],
|
|
duration: 1200,
|
|
easing: 'easeInOutSine'
|
|
},
|
|
scale: {
|
|
value: [2, 1.5],
|
|
duration: 1100,
|
|
delay: 800,
|
|
easing: 'easeInOutQuart'
|
|
},
|
|
color: [light, dark],
|
|
duration: 800,
|
|
delay: 0,
|
|
easing: 'easeInOutSine'
|
|
};
|
|
|
|
let s1a2 = {
|
|
targets: '#cover .elem .blocks > div',
|
|
backgroundColor: [light, dark],
|
|
borderRadius: function(el) { return anime.random(2, 10); },
|
|
delay: function(el) { return anime.random(0, 800); }
|
|
};
|
|
|
|
let s1a3 = {
|
|
targets: '#cover p',
|
|
opacity: [0,1],
|
|
translateX: {
|
|
value: ['-100vw', '0vw'],
|
|
duration: 1500,
|
|
},
|
|
translateY: {
|
|
value: [-100, 0],
|
|
duration: 1500,
|
|
},
|
|
easing: 'easeInOutSine',
|
|
duration: 2000
|
|
};
|
|
|
|
// Add children
|
|
tl1.add(s1a3).add(s1a1, '-=1600').add(s1a2, '-=1300');
|
|
|
|
// Get section height
|
|
let oneHeight = document.getElementById("one").clientHeight;
|
|
console.log('oneHeight: ' + oneHeight);
|
|
|
|
//------------------
|
|
//SCENE 1
|
|
//------------------
|
|
|
|
//Add first scrollmagic scene
|
|
let scene1 = new ScrollMagic.Scene({
|
|
triggerElement: "#cover",
|
|
triggerHook: 0.5,
|
|
reverse: false
|
|
})
|
|
// Trigger animation timeline
|
|
.on("enter", function (event) {
|
|
tl1.play();
|
|
})
|
|
.addTo(controller);
|