merge

js/animations_custom.js

@@ -10,20 +10,21 @@ let enable_animations = false
 enable_animations = true
 
 const rotateYCard = '200deg'
-const offsetCard = '-=100'
+const offsetCard = '10'
 
 function animateCard (id, side) {
 
+	console.log('animateCard', id, side, offsetCard)
 	const fromObject = {
 		rotateY: rotateYCard,
-		side: offsetCard
+		// side: offsetCard
 	}
 
 	let toObject = {
 		rotateY: 0,
 		duration: 0.2,
 		ease: 'easeInOut',
-		side: 0,
+		// side: 1,
 		scrollTrigger: {
 			trigger: '#content-' + id + ' .flip-handle',
 			start: 'top 80%',
@@ -31,7 +32,8 @@ function animateCard (id, side) {
 			markers: development_debug,
 		}
 	}
-	// toObject[side] = offsetCard;
+	// fromObject[side] = 1;
+	toObject[side] = offsetCard;
 
 	gsap.fromTo('#content-' + id, fromObject,
 		toObject)
@@ -79,7 +81,7 @@ if (enable_animations) {
 				trigger: '#unlock_white',
 				delay: 1,
 				scrub:2,
-				start: '+=50% 80%'
+				start: '+50% 80%'
 			}
 		})
 
@@ -92,19 +94,9 @@ if (enable_animations) {
 			scrub: 1,
 			markers: development_debug,
 		},
-		keyframes: [
+				top: '30vw',
-			{
+				width: '-40vw',
-				top: '-=50',
+
-				width: '100vw',
-			},
-			{
-				top: '-=50',
-				width: "-=5vw",
-			},
-			{
-				top: '-=100',
-				width: '-=40vw',
-			}]
 	})
 
 	gsap.fromTo('#hand',
@@ -115,7 +107,7 @@ if (enable_animations) {
 		{
 			top: 500,
 			duration: 1,
-			opacity: 0.02,
+			opacity: 0,
 			scrollTrigger: {
 				trigger: '#cover',
 				scrub: 1,
@@ -126,7 +118,7 @@ if (enable_animations) {
 	gsap.to('#phone-watches-1',
 		{
 			left: 500,
-			top: (531 - 400),
+			top: -200,
 			scale: 0.8,
 			duration: 1.5,
 			ease: 'sine',
@@ -179,24 +171,10 @@ if (enable_animations) {
 			}
 		})
 
-	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: 0.15,
 		},
 		{
 			opacity: 1,
@@ -213,7 +191,7 @@ if (enable_animations) {
 		{
 			scale: 0.8,
 			left: -50,
-			opacity: 0.5,
+			opacity: 0.15,
 			top: -20,
 		},
 		{
@@ -234,7 +212,7 @@ if (enable_animations) {
 	gsap.fromTo('#content_all_img',
 		{
 			scale: 1,
-			left: "-=100"
+			left: "-100"
 		},
 		{
 			scale: 1.1,
@@ -252,7 +230,7 @@ if (enable_animations) {
 		{
 			opacity: 0.5,
 			scale: 1,
-			bottom: '-=100vh',
+			bottom: '-100vh',
 			height: '10rem',
 		},
 		{

package.json

@@ -14,7 +14,9 @@
     "start": "serve"
   },
   "devDependencies": {
+    "node-sass": "^9.0.0",
     "parcel-bundler": "^1.8.1",
+    "sass-loader": "^13.3.2",
     "serve": "^14.2.0"
   }
 }