+ 
-
+
-
For all your @@ -87,7 +89,7 @@ uses.
+
diff --git a/js/animations_custom.js b/js/animations_custom.js
index c9a6238..4e68a4d 100644
--- a/js/animations_custom.js
+++ b/js/animations_custom.js
@@ -3,76 +3,126 @@
/**
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/
-const development_debug = false
+let development_debug = false
+// development_debug = true
let enable_animations = false
enable_animations = true
-const rotateYCard = '180deg'
+const rotateYCard = '200deg'
const offsetCard = '-100px'
-function animateCard (id , side) {
+function animateCard (id, side) {
const fromObject = {
rotateY: rotateYCard,
side: offsetCard
}
- const toObject = {
+ let toObject = {
rotateY: 0,
duration: 0.2,
ease: 'easeInOut',
- side,
+ side: 0,
scrollTrigger: {
trigger: '#content-' + id + ' .flip-handle',
+ start: 'top 80%',
scrub: 1,
markers: development_debug,
}
}
+ // toObject[side] = offsetCard;
gsap.fromTo('#content-' + id, fromObject,
toObject)
}
if (enable_animations) {
-console.log('start animations')
+ console.log('start animations')
- gsap.fromTo('#main_title', {
- opacity: 0,
- top: 200
- }, {
- opacity: 1,
+ gsap.fromTo('#for_all_your', {
+ opacity: 0,
top: 100,
- scale: 0.8,
- duration: 1.5,
- ease: 'sine',
- scrollTrigger: {
- trigger: '#cover',
- scrub: 1,
- markers: development_debug,
- }
- })
+ scale:0.5,
+ },
+ {
+ opacity: 1,
+ top:0,
+ scale:1,
+ duration: 0.25,
+ scrollTrigger: {
+ trigger: '#for_all_your',
+ start: 'top bottom'
+ }
+ })
+ gsap.fromTo('#for_all_your_2', {
+ opacity: 0,
+ scale:0.5,
+ },
+ {
+ opacity: 1,
+ duration: 1,
+ scale:1,
+ scrollTrigger: {
+ trigger: '#for_all_your_2',
+ delay: 0.4,
+ start: 'top bottom'
+ }
+ })
+
+ gsap.fromTo('#unlock_white', {
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ scrollTrigger: {
+ trigger: '#unlock_white',
+ delay: 1,
+ scrub:2,
+ start: '+=50% 80%'
+ }
+ })
+
- gsap.to('#hand', {
- top: 300,
- duration: 1,
- scrollTrigger: {
- trigger: '#cover',
- scrub: 1,
- markers: development_debug,
- }
- })
gsap.to('#main_title', {
- top: 150,
-
- duration: 1,
+ delay: 1,
+ // xPercent: ()=>nav.offsetHeight,
scrollTrigger: {
trigger: '#main_title',
scrub: 1,
markers: development_debug,
- }
+ },
+ keyframes: [
+ {
+ top: '500',
+ width: '100vw',
+ },
+ {
+ top: '200',
+ // width: "-=20vw",
+ },
+ {
+ top: '-100',
+ width: '-=40vw',
+ }]
})
+ gsap.fromTo('#hand',
+ {
+ top: -200,
+ opacity: 1,
+ },
+ {
+ top: 500,
+ duration: 1,
+ opacity: 0.5,
+ scrollTrigger: {
+ trigger: '#cover',
+ scrub: 1,
+ markers: development_debug,
+ }
+ })
+
gsap.to('#phone-watches-1',
{
left: 500,
@@ -83,9 +133,11 @@ console.log('start animations')
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
+ delay: 1,
markers: development_debug,
}
})
+
gsap.to('#phone-watches-2',
{
left: '50vw',
@@ -96,6 +148,7 @@ console.log('start animations')
scrollTrigger: {
trigger: '#welcome',
scrub: 1,
+ delay: 0.5,
markers: development_debug,
}
})
@@ -200,14 +253,14 @@ console.log('start animations')
opacity: 0.5,
scale: 1,
bottom: '-100vh',
- height: "22rem",
+ height: '22rem',
},
{
opacity: 1,
bottom: '50vh',
scale: 1.5,
ease: 'spline',
- height: "25rem",
+ height: '25rem',
scrollTrigger: {
trigger: '#open-handle',
scrub: 2,
Our creative competitive edge We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our @@ -284,7 +286,9 @@ Menu