141 lines
2.3 KiB
JavaScript
141 lines
2.3 KiB
JavaScript
/**
|
|
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
|
|
*/
|
|
let development_debug = true;
|
|
gsap.fromTo("#main_title", {
|
|
opacity: 0,
|
|
top: 200
|
|
}, {
|
|
opacity: 1,
|
|
top: 100,
|
|
duration: 1.5,
|
|
ease: "sine"
|
|
})
|
|
|
|
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.to("#content_first",
|
|
{
|
|
left: -20,
|
|
top: -50,
|
|
opacity: 1,
|
|
duration: 3,
|
|
ease: "easeInOut",
|
|
scrollTrigger: {
|
|
trigger: '#content',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
gsap.to("#content_second",
|
|
{
|
|
left: -20,
|
|
top: -50,
|
|
opacity: 1,
|
|
duration: 2,
|
|
ease: "spline",
|
|
scrollTrigger: {
|
|
trigger: '#content',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|
|
// le background coloré grandit légèrement
|
|
gsap.to("#content_all_img",
|
|
{
|
|
scale: 1.5,
|
|
ease: "easeInOut",
|
|
scrollTrigger: {
|
|
trigger: '#content',
|
|
scrub: 2,
|
|
markers: development_debug,
|
|
}
|
|
})
|
|
|