233 lines
3.7 KiB
JavaScript
233 lines
3.7 KiB
JavaScript
/**
|
|
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
|
|
*/
|
|
let development_debug = false
|
|
|
|
let enable_animations = false
|
|
enable_animations = true
|
|
|
|
if (enable_animations) {
|
|
|
|
gsap.fromTo('#main_title', {
|
|
opacity: 0,
|
|
top: 200
|
|
}, {
|
|
opacity: 1,
|
|
top: 100,
|
|
scale: 0.8,
|
|
duration: 1.5,
|
|
ease: 'sine',
|
|
scrollTrigger: {
|
|
trigger: '#cover',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
gsap.to('#hand', {
|
|
top: 300,
|
|
duration: 1,
|
|
scrollTrigger: {
|
|
trigger: '#cover',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
gsap.to('#main_title', {
|
|
top: 150,
|
|
|
|
duration: 1,
|
|
scrollTrigger: {
|
|
trigger: '#main_title',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
gsap.to('#phone-watches-1',
|
|
{
|
|
left: 500,
|
|
top: (531 - 400),
|
|
scale: 0.8,
|
|
duration: 1.5,
|
|
ease: 'sine',
|
|
scrollTrigger: {
|
|
trigger: '#welcome',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
gsap.to('#phone-watches-2',
|
|
{
|
|
left: '50vw',
|
|
top: 100,
|
|
scale: 0.7,
|
|
duration: 1.25,
|
|
ease: 'sine',
|
|
scrollTrigger: {
|
|
trigger: '#welcome',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
gsap.to('#phone-watches-3',
|
|
{
|
|
left: '50vw',
|
|
top: 0,
|
|
scale: 0.8,
|
|
duration: 1.25,
|
|
ease: 'sine',
|
|
scrollTrigger: {
|
|
trigger: '#welcome',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
gsap.to('#phone-watches-4',
|
|
{
|
|
left: '50vw',
|
|
top: -10,
|
|
scale: 0.5,
|
|
duration: 3,
|
|
ease: 'sine',
|
|
scrollTrigger: {
|
|
trigger: '#welcome',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
gsap.to('#phone-watches-4',
|
|
{
|
|
left: '50vw',
|
|
top: -10,
|
|
scale: 0.5,
|
|
duration: 3,
|
|
ease: 'sine',
|
|
scrollTrigger: {
|
|
trigger: '#welcome',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
gsap.fromTo('#content_first',
|
|
{
|
|
scale: 0.5,
|
|
opacity: 0.5,
|
|
},
|
|
{
|
|
opacity: 1,
|
|
scale: 0.6,
|
|
ease: 'easeInOut',
|
|
scrollTrigger: {
|
|
trigger: '#content',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
gsap.fromTo('#content_second',
|
|
{
|
|
scale: 0.8,
|
|
left: -50,
|
|
opacity: 0.5,
|
|
top: -20,
|
|
},
|
|
{
|
|
left: -40,
|
|
top: -50,
|
|
opacity: 1,
|
|
duration: 2,
|
|
scale: 0.9,
|
|
ease: 'spline',
|
|
scrollTrigger: {
|
|
trigger: '#content',
|
|
scrub: 0.5,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
// le background coloré grandit légèrement
|
|
gsap.fromTo('#content_all_img',
|
|
{
|
|
scale: 0.8,
|
|
left: -50
|
|
},
|
|
{
|
|
scale: 1,
|
|
left: 0,
|
|
ease: 'linear',
|
|
scrollTrigger: {
|
|
trigger: '#content_all .columns',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
// TODO faire devenir fixe le background une fois que l'on est passé
|
|
gsap.fromTo('#open img',
|
|
{
|
|
opacity: 0.5,
|
|
bottom: '-100vh'
|
|
},
|
|
{
|
|
opacity: 1,
|
|
bottom: '50vh',
|
|
scale: 1.5,
|
|
ease: 'spline',
|
|
scrollTrigger: {
|
|
trigger: '#open-handle',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
let rotateYCard = '180deg'
|
|
let offsetCard = '-100px'
|
|
// flip from right
|
|
gsap.fromTo('#content-2', {
|
|
rotateY: rotateYCard,
|
|
right: offsetCard,
|
|
},
|
|
{
|
|
rotateY: 0,
|
|
right: 0,
|
|
duration: 0.2,
|
|
ease: 'easeInOut',
|
|
scrollTrigger: {
|
|
trigger: '#content-2 .flip-handle',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
function animateCard (id, side) {
|
|
|
|
let fromObject = {
|
|
rotateY: rotateYCard,
|
|
}
|
|
fromObject[side] = offsetCard
|
|
|
|
let toObject = {
|
|
rotateY: 0,
|
|
duration: 0.2,
|
|
ease: 'easeInOut',
|
|
scrollTrigger: {
|
|
trigger: '#content-' + id + ' .flip-handle',
|
|
scrub: 1,
|
|
markers: development_debug,
|
|
}
|
|
}
|
|
toObject[side] = 0
|
|
|
|
gsap.fromTo('#content-' + id, fromObject,
|
|
toObject)
|
|
}
|
|
|
|
animateCard(2, 'right')
|
|
animateCard(3, 'left')
|
|
animateCard(4, 'right')
|
|
animateCard(5, 'left')
|
|
}
|