digital-theory/js/animations_custom.js

290 lines
4.5 KiB
JavaScript
Raw Normal View History

2023-06-02 17:24:40 +02:00
// animation
/**
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/
let development_debug = false
// development_debug = true
2023-06-02 17:24:40 +02:00
let enable_animations = false
2023-07-09 16:10:57 +02:00
// enable_animations = true
2023-06-02 17:24:40 +02:00
const rotateYCard = '200deg'
2023-06-21 11:33:49 +02:00
const offsetCard = '10'
2023-06-02 17:24:40 +02:00
2023-07-03 16:17:42 +02:00
let innerWidth = window.innerWidth
if (document.onresize) {
document.onresize(event => {
innerWidth = window.innerWidth
console.log('innerWidth', innerWidth)
})
}
function animateCard (id, side) {
2023-06-02 17:24:40 +02:00
2023-06-21 12:23:06 +02:00
console.log('animateCard', '#content-' + id + ' .flip-handle', side, offsetCard)
2023-06-02 17:24:40 +02:00
const fromObject = {
rotateY: rotateYCard,
2023-07-03 18:11:48 +02:00
rotateX: '-10deg',
2023-06-21 11:33:49 +02:00
// side: offsetCard
2023-06-02 17:24:40 +02:00
}
let toObject = {
2023-06-02 17:24:40 +02:00
rotateY: 0,
2023-07-03 18:11:48 +02:00
rotateX: 0,
2023-06-02 17:24:40 +02:00
duration: 0.2,
ease: 'easeInOut',
2023-06-21 11:33:49 +02:00
// side: 1,
2023-06-02 17:24:40 +02:00
scrollTrigger: {
trigger: '#content-' + id + ' .flip-handle',
start: 'top 80%',
2023-06-02 17:24:40 +02:00
scrub: 1,
markers: development_debug,
}
}
2023-07-03 16:17:42 +02:00
fromObject[side] = 1
toObject[side] = offsetCard
2023-06-02 17:24:40 +02:00
gsap.fromTo('#content-' + id, fromObject,
toObject)
}
if (enable_animations) {
console.log('start animations')
2023-06-02 17:24:40 +02:00
gsap.fromTo('#for_all_your', {
opacity: 0,
2023-07-03 16:17:42 +02:00
top: 100,
scale: 0.5,
},
{
opacity: 1,
2023-07-03 16:17:42 +02:00
top: 0,
scale: 1,
duration: 0.25,
scrollTrigger: {
trigger: '#for_all_your',
start: 'top bottom'
}
})
gsap.fromTo('#for_all_your_2', {
opacity: 0,
2023-07-03 16:17:42 +02:00
scale: 0.5,
},
{
opacity: 1,
duration: 1,
2023-07-03 16:17:42 +02:00
scale: 1,
scrollTrigger: {
trigger: '#for_all_your_2',
delay: 0.4,
start: 'top bottom'
}
})
2023-06-02 17:24:40 +02:00
2023-07-03 18:11:48 +02:00
gsap.fromTo('#unlock, #unlock_white', {
opacity: 0.1,
// scale: 1,
},
{
opacity: 1,
2023-07-03 18:11:48 +02:00
// scale: 1.25,
scrollTrigger: {
trigger: '#unlock_white',
delay: 1,
2023-07-03 16:17:42 +02:00
scrub: 2,
2023-06-21 11:33:49 +02:00
start: '+50% 80%'
}
})
2023-06-02 17:24:40 +02:00
gsap.to('#main_title', {
delay: 1,
// xPercent: ()=>nav.offsetHeight,
2023-06-02 17:24:40 +02:00
scrollTrigger: {
trigger: '#main_title',
scrub: 1,
markers: development_debug,
},
2023-07-03 16:17:42 +02:00
top: innerWidth > 1300 ? '15vw' : '30vw',
width: '-40vw',
2023-06-21 12:08:06 +02:00
2023-06-02 17:24:40 +02:00
})
gsap.fromTo('#hand',
{
top: -200,
opacity: 1,
},
{
top: 500,
duration: 1,
2023-06-21 11:33:49 +02:00
opacity: 0,
scrollTrigger: {
trigger: '#cover',
scrub: 1,
markers: development_debug,
}
})
2023-06-02 17:24:40 +02:00
gsap.to('#phone-watches-1',
{
left: 500,
2023-06-21 11:33:49 +02:00
top: -200,
2023-06-02 17:24:40 +02:00
scale: 0.8,
duration: 1.5,
ease: 'sine',
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
delay: 1,
2023-06-02 17:24:40 +02:00
markers: development_debug,
}
})
2023-06-02 17:24:40 +02:00
gsap.to('#phone-watches-2',
{
left: '50vw',
top: 100,
scale: 0.7,
duration: 1.25,
ease: 'sine',
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
delay: 0.5,
2023-06-02 17:24:40 +02:00
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.fromTo('#content_first',
{
scale: 0.5,
2023-06-21 11:33:49 +02:00
opacity: 0.15,
2023-06-02 17:24:40 +02:00
},
{
opacity: 1,
2023-07-03 21:05:35 +02:00
scale: 0.9,
2023-06-02 17:24:40 +02:00
ease: 'easeInOut',
scrollTrigger: {
trigger: '#content',
scrub: 1,
markers: development_debug,
}
})
gsap.fromTo('#content_second',
{
scale: 0.8,
left: -50,
2023-06-21 11:33:49 +02:00
opacity: 0.15,
2023-06-02 17:24:40 +02:00
top: -20,
},
{
left: -40,
top: -50,
opacity: 1,
duration: 2,
2023-07-03 21:05:35 +02:00
scale: 1.5,
2023-06-02 17:24:40 +02:00
ease: 'spline',
scrollTrigger: {
trigger: '#content',
scrub: 0.5,
markers: development_debug,
}
})
// le background coloré grandit légèrement
gsap.fromTo('#content_all_img',
{
2023-06-02 17:35:36 +02:00
scale: 1,
2023-07-03 16:17:42 +02:00
left: '-100'
2023-06-02 17:24:40 +02:00
},
{
2023-06-02 17:35:36 +02:00
scale: 1.1,
2023-06-02 17:24:40 +02:00
left: 0,
ease: 'linear',
scrollTrigger: {
trigger: '#content_all .columns',
scrub: 1,
markers: development_debug,
}
})
2023-07-03 21:05:35 +02:00
gsap.fromTo('#unlock',
{
marginTop: "0",
},
{
marginTop: "-4px",
ease: 'spline',
scrollTrigger: {
trigger: '#open-handle',
markers: development_debug,
}
})
gsap.fromTo('#unlock_white',
2023-06-02 17:24:40 +02:00
{
opacity: 0.5,
},
{
opacity: 1,
ease: 'spline',
scrollTrigger: {
trigger: '#open-handle',
2023-07-03 21:05:35 +02:00
2023-06-02 17:24:40 +02:00
markers: development_debug,
}
})
// 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,
}
})
animateCard(2, 'right')
animateCard(3, 'left')
animateCard(4, 'right')
animateCard(5, 'left')
}