digital-theory/js/main.js

233 lines
3.7 KiB
JavaScript
Raw Normal View History

2023-04-25 11:10:59 +02:00
/**
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/
2023-04-27 17:04:28 +02:00
let development_debug = false
2023-05-11 14:23:32 +02:00
let enable_animations = false
2023-05-11 15:00:25 +02:00
enable_animations = true
2023-04-27 15:57:38 +02:00
2023-05-11 14:23:32 +02:00
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,
}
})
2023-05-11 15:16:43 +02:00
gsap.fromTo('#content_first',
{
scale: 0.5,
opacity: 0.5,
},
2023-05-11 14:23:32 +02:00
{
opacity: 1,
2023-05-11 15:16:43 +02:00
scale: 0.6,
2023-05-11 14:23:32 +02:00
ease: 'easeInOut',
scrollTrigger: {
trigger: '#content',
2023-05-11 15:16:43 +02:00
scrub: 1,
2023-05-11 14:23:32 +02:00
markers: development_debug,
}
})
2023-05-11 15:16:43 +02:00
gsap.fromTo('#content_second',
{
scale: 0.8,
left: -50,
opacity: 0.5,
top: -20,
},
2023-05-11 14:23:32 +02:00
{
left: -40,
top: -50,
opacity: 1,
duration: 2,
2023-05-11 15:16:43 +02:00
scale: 0.9,
2023-05-11 14:23:32 +02:00
ease: 'spline',
scrollTrigger: {
trigger: '#content',
scrub: 0.5,
markers: development_debug,
}
})
2023-04-25 14:59:51 +02:00
// le background coloré grandit légèrement
2023-05-11 14:23:32 +02:00
gsap.fromTo('#content_all_img',
{
scale: 0.8,
2023-05-11 15:00:25 +02:00
left: -50
2023-05-11 14:23:32 +02:00
},
{
2023-05-11 15:16:43 +02:00
scale: 1,
left: 0,
2023-05-11 14:23:32 +02:00
ease: 'linear',
scrollTrigger: {
trigger: '#content_all .columns',
scrub: 1,
markers: development_debug,
}
})
2023-04-25 14:59:51 +02:00
// TODO faire devenir fixe le background une fois que l'on est passé
2023-05-11 14:23:32 +02:00
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'
2023-04-25 17:22:09 +02:00
// flip from right
2023-05-11 14:23:32 +02:00
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
2023-04-25 17:22:09 +02:00
2023-05-11 14:23:32 +02:00
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')
}