From bcc9d8bd485282bb5c4afde95217f473bea30a3e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 21 Jun 2023 11:33:49 +0200
Subject: [PATCH] rearrange animation

---
 css/sprint_4.css        | 771 ++++++++++++++++++++--------------------
 js/animations_custom.js |  48 +--
 2 files changed, 411 insertions(+), 408 deletions(-)

diff --git a/css/sprint_4.css b/css/sprint_4.css
index f0a6d84..824a42b 100644
--- a/css/sprint_4.css
+++ b/css/sprint_4.css
@@ -12731,171 +12731,6 @@ main nav {
 	margin-top: 0;
 	padding-top: 50vh;
 }
-@media screen and (max-width: 1023px) {
-	#main_title_container h2 {
-		margin-top: 5vh;
-	}
-
-	#main_title {
-		top: 15rem;
-		height: 25vh;
-	}
-
-	#cover .button {
-		top: 7vh;
-	}
-
-	#content_all h2,
-	#welcome h2 {
-		font-size: 6em;
-		line-height: 1em;
-		text-align: left;
-	}
-
-
-	#content_all .columns {
-		top: -145vh;
-		width: 55vw;
-	}
-	.columns {
-		display: block !important;
-	}
-	.column {
-		width: 100% !important;
-	}
-
-	#open {
-		top: 80vh;
-	}
-	/**
-	flipping part
-	 */
-	#flipping_zone {
-		margin-top: -120vh;
-		position: static;
-	}
-	.flip-container {
-		position: relative;
-	}
-
-	.flip-container + .flip-container {
-		margin-top: -5vh;
-	}
-	.flip-container .container-text {
-		z-index: 1;
-		left: 33vw;
-	}
-	.flip-container .text-title {
-		margin-top: 0;
-	}
-
-	.flip-container .phone-container {
-		left: 42vw;
-		top: 5vh;
-	}
-	.flip-container.flip-from-left .container-text {
-		left: 33vw;
-		top: 5vh;
-	}
-	.flip-container.flip-from-left .phone-container {
-		left: 25vw;
-		top: 10vh;
-	}
-
-	#content-4 {
-		margin-top: 25vh;
-	}
-	#content-5 {
-		margin-top: 15vh;
-	}
-
-	#popover {
-		margin-top: 100vh;
-	}
-	/**
-	exemples sliders
-	 */
-	.slider-screen .text-title {
-		margin-top: 1em;
-	}
-	.slider-screen .text,
-	.slider-screen .phone-container {
-		position: relative;
-		width: 412px;
-		left: 25vw;
-		top: 5vh;
-	}
-	.bullets {
-		top: 28em;
-	}
-	.arrow-left,
-	.arrow-right {
-		top: 60vh;
-	}
-	.slider-screen {
-		min-height: 100vh;
-	}
-	#popover, #portfolio {
-		min-height: 200vh;
-	}
-	#popover .phone-container, #portfolio .phone-container{
-		width: 50vw;
-	}
-
-}
-@media screen and (max-width: 35em) {
-	#main_title {
-		margin-top: 5vh;
-	}
-	#main_title_container h2 {
-		margin-top: 15vh;
-	}
-
-	#content_all h2,
-	#welcome h2 {
-		font-size: 4rem !important;
-	}
-	#content_all .text {
-		padding-right: 0;
-	}
-	.container-text-md {
-		width: auto;
-	}
-	#content_all .columns {
-		width: 100%;
-		margin: 1rem;
-	}
-	.flip-container .container-text {
-		width: 100%;
-		left: 5vw;
-	}
-	.flip-container .phone-container {
-		position: static;
-		margin: 4rem auto;
-	}
-	.flip-container.flip-from-left .container-text {
-		left: 5vw;
-	}
-	.flip-container .phone-container {
-		margin-top: 7rem;
-	}
-	.flip-container .text-description {
-		max-width: 90vw;
-	}
-
-	#content-4 {
-		margin-top: 50vh;
-	}
-	#content-5 {
-		margin-top: 45vh;
-	}
-
-	.slider-screen .text,
-	.slider-screen .phone-container {
-		left: 5vw;
-		max-width: 90vw;
-	}
-}
 body {
 	background: #fff;
 	padding-bottom: 50vh;
@@ -13106,92 +12941,7 @@ main .credits {
 	left: 0;
 	top: -97em;
 }
-@media all and (max-width: 1600px) {
-	section#carry {
-		min-height: 120rem;
-	}
-	section#carry .description {
-		margin-top: 3vh;
-		font-size: 8rem;
-	}
-	section#carry .gradient-bg {
-		top: -40rem;
-	}
-	section#carry .gradient-bg-yellow {
-		top: 10rem;
-	}
-	section#carry .computer-block {
-		width: 70%;
-		height: 1080px;
-		left: 0;
-		top: -110em;
-		background-size: contain;
-		margin: 0 auto;
-	}
-	section#carry .bubbles {
-		position: relative;
-		left: -5vw;
-	}
-	section#carry .bubbles p :nth-of-type(1) {
-		top: -75vh;
-	}
-	section#carry .bubbles p :nth-of-type(2) {
-		left: 70%;
-	}
-	section#carry .bubbles p :nth-of-type(3) {
-		left: 50%;
-	}
-	section#carry .bubbles p :nth-of-type(4) {
-		left: 10%;
-	}
-}
-@media all and (max-width: 1100px) {
-	section#carry {
-		padding-left: 10vw;
-		padding-right: 10vw;
-		min-height: 115rem;
-	}
-	section#carry .title {
-		font-size: 4rem;
-	}
-	section#carry .description {
-		margin-top: 3vh;
-		font-size: 10rem;
-	}
-	section#carry .computer-block {
-		background-size: contain;
-		position: relative;
-		height: 100vh;
-		width: 100%;
-		margin-top: -15rem;
-	}
-	section#carry .gradient-bg {
-		margin-top: 0;
-	}
-	section#carry .gradient-bg-yellow {
-		margin-top: 0;
-	}
-	section#carry .bubbles {
-		position: static;
-	}
-	section#carry .bubbles p  {
-		margin-top: 2rem;
-		left: 0;
-	}
-	section#carry .bubbles p :nth-of-type(1) {
-		left: 10%;
-	}
-	section#carry .bubbles p :nth-of-type(2) {
-		left: 70%;
-	}
-	section#carry .bubbles p :nth-of-type(3) {
-		left: 4vw;
-		margin-left: -60%;
-	}
-	section#carry .bubbles p :nth-of-type(4) {
-		left: -10%;
-	}
-}
+
 #kyc {
 	font-family: "GT Walsheim Pro";
 	background: white;
@@ -13350,24 +13100,8 @@ main .credits {
 	left: 1124px;
 	top: 10vhpx;
 }
-@media screen and (max-width: 1300px) {
-	#kyc .small-bubble:nth-of-type(1) {
-		margin-top: 14rem;
-	}
-	#kyc .bubbles .bubble {
-		position: static;
-	}
-	#kyc .bubbles .bubble:nth-of-type(1) {
-		margin-left: 12rem;
-	}
-	#kyc .bubbles .bubble:nth-of-type(2) {
-		margin-left: 5rem;
-	}
-	#kyc .bubbles .bubble:nth-of-type(3) {
-		margin-left: 34%;
-		margin-top: 0;
-	}
-}
+
+
 #china {
 	background-color: #141373;
 	height: 1060px;
@@ -13610,36 +13344,7 @@ main .credits {
 #we_develop .rotated {
 	transform: rotate(180deg);
 }
-@media all and (max-width: 1500px) {
-	#we_develop .circle.circle-right {
-		right: 10vw;
-	}
-	#we_develop .circle.circle-left {
-		right: 90vw;
-	}
-	#we_develop .quick {
-		left: 3rem;
-		top: 77rem;
-	}
-	#we_develop .long_term {
-		margin-right: 5rem;
-	}
-	#we_develop .data {
-		text-align: left;
-		padding-left: 6rem;
-		margin-top: 2rem;
-	}
-	#we_develop .ar {
-		text-align: right;
-		padding-right: 6rem;
-		margin-top: 3rem;
-	}
-}
-@media all and (max-width: 1100px) {
-	#we_develop .ar {
-		margin-top: -3rem;
-	}
-}
+
 #full_creative {
 	background: white;
 	min-height: 120vh;
@@ -13680,26 +13385,7 @@ main .credits {
 #full_creative img {
 	max-width: 80vw;
 }
-@media all and (max-width: 1500px) {
-	#full_creative {
-		padding-bottom: 20rem;
-	}
-	#full_creative .title {
-		padding: 2rem;
-	}
-	#full_creative .column {
-		padding: 2rem;
-	}
-	#full_creative .column p {
-		font-size: 1.5rem;
-	}
-	#full_creative .column, #full_creative .columns {
-		display: block;
-	}
-	#full_creative img {
-		margin-bottom: 15rem;
-	}
-}
+
 #our_team {
 	background: white;
 	padding-top: 5rem;
@@ -13739,26 +13425,7 @@ main .credits {
 	padding: 0 2em;
 	background: white;
 }
-@media screen and (max-width: 1500px) {
-	#our_team {
-		margin-top: 30rem;
-		padding-bottom: 20rem;
-	}
-	#our_team img {
-		max-width: 100%;
-		margin: 0 auto;
-	}
-	#our_team .columns, #our_team .colmumn {
-		display: block;
-		position: static;
-	}
-	#our_team .name {
-		font-size: 1.5rem;
-	}
-	#our_team .sub-category {
-		margin-bottom: 10rem;
-	}
-}
+
 #china_achievements {
 	margin-top: 30rem;
 	background: white;
@@ -13790,6 +13457,392 @@ main .credits {
 #china_achievements .offset-left-columns {
 	margin-left: -10rem;
 }
+
+#baozun_group {
+	margin-top: 150px;
+	background: url("/img/baozun.jpg") no-repeat;
+	background-size: cover;
+	border-radius: 80px;
+}
+#baozun_group .title {
+	color: #FFFDFC;
+	font-style: normal;
+	font-weight: 600;
+	font-size: 100px;
+	line-height: 90px;
+	text-align: center;
+	letter-spacing: -0.04em;
+	padding-top: 464px;
+}
+
+
+
+.counter-block .big-number {
+	font-weight: 600;
+	font-size: 140px;
+	line-height: 90%;
+	letter-spacing: -0.04em;
+	color: #020225;
+}
+
+.counter-block .text-description {
+	font-weight: 400;
+	font-size: 10px;
+	line-height: 150%;
+	text-align: center;
+	text-transform: uppercase;
+	color: #020225;
+}
+
+.counter-block img {
+	margin-left: 80px;
+	border-radius: 80px;
+}
+
+
+@media all and (max-width: 1023px) {
+	#main_title_container h2 {
+		margin-top: 5vh;
+	}
+
+	#main_title {
+		top: 15rem;
+		height: 25vh;
+	}
+
+	#cover .button {
+		top: 7vh;
+	}
+
+	#content_all h2,
+	#welcome h2 {
+		font-size: 6em;
+		line-height: 1em;
+		text-align: left;
+	}
+
+
+	#content_all .columns {
+		top: -145vh;
+		width: 55vw;
+	}
+	.columns {
+		display: block !important;
+	}
+	.column {
+		width: 100% !important;
+	}
+
+	#open {
+		top: 80vh;
+	}
+	/**
+	flipping part
+	 */
+	#flipping_zone {
+		margin-top: -120vh;
+		position: static;
+	}
+	.flip-container {
+		position: relative;
+	}
+
+	.flip-container + .flip-container {
+		margin-top: 20vh;
+	}
+	.flip-container .container-text {
+		z-index: 1;
+		left: 33vw;
+	}
+	.flip-container .text-title {
+		margin-top: 0;
+	}
+
+	.flip-container .phone-container {
+		left: 42vw;
+		top: 5vh;
+	}
+	.flip-container.flip-from-left .container-text {
+		left: 33vw;
+		top: 5vh;
+	}
+	.flip-container.flip-from-left .phone-container {
+		left: 25vw;
+		top: 10vh;
+	}
+
+	#content-4 {
+		margin-top: 25vh;
+	}
+	#content-5 {
+		margin-top: 15vh;
+	}
+
+	#popover {
+		margin-top: 100vh;
+	}
+	/**
+	exemples sliders
+	 */
+	.slider-screen .text-title {
+		margin-top: 1em;
+	}
+	.slider-screen .text,
+	.slider-screen .phone-container {
+		position: relative;
+		width: 412px;
+		left: 25vw;
+		top: 5vh;
+	}
+	.bullets {
+		top: 28em;
+	}
+	.arrow-left,
+	.arrow-right {
+		top: 60vh;
+	}
+	.slider-screen {
+		min-height: 100vh;
+	}
+	#popover, #portfolio {
+		min-height: 200vh;
+	}
+	#popover .phone-container, #portfolio .phone-container{
+		width: 50vw;
+	}
+
+}
+@media all and (max-width: 35em) {
+	#main_title {
+		margin-top: 5vh;
+	}
+	#main_title_container h2 {
+		margin-top: 15vh;
+	}
+
+	#content_all h2,
+	#welcome h2 {
+		font-size: 4rem !important;
+	}
+	#content_all .text {
+		padding-right: 0;
+	}
+	.container-text-md {
+		width: auto;
+	}
+	#content_all .columns {
+		width: 100%;
+		margin: 1rem;
+	}
+	.flip-container .container-text {
+		width: 100%;
+		left: 6vw;
+	}
+	.flip-container .phone-container {
+		position: static;
+		margin: 4rem auto;
+	}
+	.flip-container.flip-from-left .container-text {
+		left: 5vw;
+	}
+	.flip-container .phone-container {
+		margin-top: 7rem;
+	}
+	.flip-container .text-description {
+		max-width: 90vw;
+	}
+
+	#content-4 {
+		margin-top: 50vh;
+	}
+	#content-5 {
+		margin-top: 45vh;
+	}
+
+	.slider-screen .text,
+	.slider-screen .phone-container {
+		left: 5vw;
+		max-width: 90vw;
+	}
+}
+
+@media all and (max-width: 1600px) {
+	section#carry {
+		min-height: 120rem;
+	}
+	section#carry .description {
+		margin-top: 3vh;
+		font-size: 8rem;
+	}
+	section#carry .gradient-bg {
+		top: -40rem;
+	}
+	section#carry .gradient-bg-yellow {
+		top: 10rem;
+	}
+	section#carry .computer-block {
+		width: 70%;
+		height: 1080px;
+		left: 0;
+		top: -110em;
+		background-size: contain;
+		margin: 0 auto;
+	}
+	section#carry .bubbles {
+		position: relative;
+		left: -5vw;
+	}
+	section#carry .bubbles p :nth-of-type(1) {
+		top: -75vh;
+	}
+	section#carry .bubbles p :nth-of-type(2) {
+		left: 70%;
+	}
+	section#carry .bubbles p :nth-of-type(3) {
+		left: 50%;
+	}
+	section#carry .bubbles p :nth-of-type(4) {
+		left: 10%;
+	}
+}
+@media all and (max-width: 1100px) {
+	section#carry {
+		padding-left: 10vw;
+		padding-right: 10vw;
+		min-height: 115rem;
+	}
+	section#carry .title {
+		font-size: 4rem;
+	}
+	section#carry .description {
+		margin-top: 3vh;
+		font-size: 10rem;
+	}
+	section#carry .computer-block {
+		background-size: contain;
+		position: relative;
+		height: 100vh;
+		width: 100%;
+		margin-top: -15rem;
+	}
+	section#carry .gradient-bg {
+		margin-top: 0;
+	}
+	section#carry .gradient-bg-yellow {
+		margin-top: 0;
+	}
+	section#carry .bubbles {
+		position: static;
+	}
+	section#carry .bubbles p  {
+		margin-top: 2rem;
+		left: 0;
+	}
+	section#carry .bubbles p :nth-of-type(1) {
+		left: 10%;
+	}
+	section#carry .bubbles p :nth-of-type(2) {
+		left: 70%;
+	}
+	section#carry .bubbles p :nth-of-type(3) {
+		left: 4vw;
+		margin-left: -60%;
+	}
+	section#carry .bubbles p :nth-of-type(4) {
+		left: -10%;
+	}
+}
+
+@media all and (max-width: 1300px) {
+	#kyc .small-bubble:nth-of-type(1) {
+		margin-top: 14rem;
+	}
+	#kyc .bubbles .bubble {
+		position: static;
+	}
+	#kyc .bubbles .bubble:nth-of-type(1) {
+		margin-left: 12rem;
+	}
+	#kyc .bubbles .bubble:nth-of-type(2) {
+		margin-left: 5rem;
+	}
+	#kyc .bubbles .bubble:nth-of-type(3) {
+		margin-left: 34%;
+		margin-top: 0;
+	}
+}
+
+@media all and (max-width: 1500px) {
+	#we_develop .circle.circle-right {
+		right: 10vw;
+	}
+	#we_develop .circle.circle-left {
+		right: 90vw;
+	}
+	#we_develop .quick {
+		left: 3rem;
+		top: 77rem;
+	}
+	#we_develop .long_term {
+		margin-right: 5rem;
+	}
+	#we_develop .data {
+		text-align: left;
+		padding-left: 6rem;
+		margin-top: 2rem;
+	}
+	#we_develop .ar {
+		text-align: right;
+		padding-right: 6rem;
+		margin-top: 3rem;
+	}
+}
+@media all and (max-width: 1100px) {
+	#we_develop .ar {
+		margin-top: -3rem;
+	}
+}
+
+@media all and (max-width: 1500px) {
+	#full_creative {
+		padding-bottom: 20rem;
+	}
+	#full_creative .title {
+		padding: 2rem;
+	}
+	#full_creative .column {
+		padding: 2rem;
+	}
+	#full_creative .column p {
+		font-size: 1.5rem;
+	}
+	#full_creative .column, #full_creative .columns {
+		display: block;
+	}
+	#full_creative img {
+		margin-bottom: 15rem;
+	}
+}
+@media screen and (max-width: 1500px) {
+	#our_team {
+		margin-top: 30rem;
+		padding-bottom: 20rem;
+	}
+	#our_team img {
+		max-width: 100%;
+		margin: 0 auto;
+	}
+	#our_team .columns, #our_team .colmumn {
+		display: block;
+		position: static;
+	}
+	#our_team .name {
+		font-size: 1.5rem;
+	}
+	#our_team .sub-category {
+		margin-bottom: 10rem;
+	}
+}
 @media screen and (max-width: 1500px) {
 	#china_achievements {
 		margin-top: 895vw;
@@ -13819,22 +13872,7 @@ main .credits {
 		width: 100%;
 	}
 }
-#baozun_group {
-	margin-top: 150px;
-	background: url("/img/baozun.jpg") no-repeat;
-	background-size: cover;
-	border-radius: 80px;
-}
-#baozun_group .title {
-	color: #FFFDFC;
-	font-style: normal;
-	font-weight: 600;
-	font-size: 100px;
-	line-height: 90px;
-	text-align: center;
-	letter-spacing: -0.04em;
-	padding-top: 464px;
-}
+
 @media screen and (max-width: 1500px) {
 	#baozun_group {
 		margin-top: 605vw;
@@ -13845,26 +13883,3 @@ main .credits {
 		margin-top: 650vw;
 	}
 }
-
-
-.counter-block .big-number {
-	font-weight: 600;
-	font-size: 140px;
-	line-height: 90%;
-	letter-spacing: -0.04em;
-	color: #020225;
-}
-
-.counter-block .text-description {
-	font-weight: 400;
-	font-size: 10px;
-	line-height: 150%;
-	text-align: center;
-	text-transform: uppercase;
-	color: #020225;
-}
-
-.counter-block img {
-	margin-left: 80px;
-	border-radius: 80px;
-}
diff --git a/js/animations_custom.js b/js/animations_custom.js
index f8285ff..013460d 100644
--- a/js/animations_custom.js
+++ b/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] = 0;
+	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%'
 			}
 		})
 
@@ -94,16 +96,16 @@ if (enable_animations) {
 		},
 		keyframes: [
 			{
-				top: '-=50',
+				top: '-50',
 				width: '100vw',
 			},
 			{
-				top: '-=50',
-				width: "-=5vw",
+				top: '-50',
+				width: "-5vw",
 			},
 			{
-				top: '-=100',
-				width: '-=40vw',
+				top: '-100',
+				width: '-40vw',
 			}]
 	})
 
@@ -115,7 +117,7 @@ if (enable_animations) {
 		{
 			top: 500,
 			duration: 1,
-			opacity: 0.5,
+			opacity: 0,
 			scrollTrigger: {
 				trigger: '#cover',
 				scrub: 1,
@@ -126,7 +128,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 +181,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 +201,7 @@ if (enable_animations) {
 		{
 			scale: 0.8,
 			left: -50,
-			opacity: 0.5,
+			opacity: 0.15,
 			top: -20,
 		},
 		{
@@ -234,7 +222,7 @@ if (enable_animations) {
 	gsap.fromTo('#content_all_img',
 		{
 			scale: 1,
-			left: "-=100"
+			left: "-100"
 		},
 		{
 			scale: 1.1,
@@ -252,7 +240,7 @@ if (enable_animations) {
 		{
 			opacity: 0.5,
 			scale: 1,
-			bottom: '-=100vh',
+			bottom: '-100vh',
 			height: '10rem',
 		},
 		{