rotate all cards with a flip handle

css/0-general.css

@@ -1,6 +1,7 @@
 /******** all sections *********/
 body{
   background: #020225;
+  padding-bottom: 50vh;
 }
 
 

css/4-content.css

@@ -22,11 +22,9 @@
 
 
 #content {
-
   height: 200px;
   min-height: 200px;
 }
-
 #content h2 {
   margin-top: 33vh;
 }
@@ -69,11 +67,23 @@
   flex-grow: 0;
 }
 
+.flip-handle{
+  background: transparent;
+  height: 10vh;
+  width: 2vw;
+  position: relative;
+  top:-25vh;
+}
 
 .flip-container{
   color: #FFFDFC;
   padding-top: 15vh;
+  transform-origin: right;
 }
+.flip-container.flip-from-left{
+  transform-origin: left;
+}
+
 .flip-container + .flip-container{
   padding-top:0;
   margin-top: -15vh;
@@ -88,8 +98,8 @@
   text-align: left;
 }
 .flip-container.flip-from-left .container-text{
-  width: 50%;
-  left: 50%;
+  width: 320px;
+  left: 613px;
 }
 
 .flip-container .color-emphasis {
@@ -115,7 +125,7 @@
 .flip-container .phone-container{
   box-sizing: border-box;
   position: relative;
-  left: 60vw;
+  left: 66vw;
   top: -540px;
   background: rgba(225, 196, 183, 0.2);
   border-radius: 70px;
@@ -126,7 +136,7 @@
 }
 
 .flip-container.flip-from-left .phone-container{
-  left: 5vw;
+  left: 183px;
   top: -540px;
 }
 
@@ -146,13 +156,13 @@
   gap: 10px;
   width: 198px;
   height: 56px;
-  border-radius: 70px;
   flex: none;
   order: 2;
   flex-grow: 0;
   background: transparent;
   color: #fff;
   border: 10px solid;
+  border-radius: 70px;
   border-image-slice: 1;
   border-width: 5px;
   border-image-source: linear-gradient(to left, #743ad5, #d53a9d);

index.html

@@ -101,6 +101,7 @@
 
   <!--  flipping zones-->
   <section id="content-2" class="flip-container flip-from-right">
+    <div id="content-2-handle" class="flip-handle"></div>
     <div class="container-text">
       <h2 class="text-title">
         Motion &
@@ -120,6 +121,7 @@
   </section>
 
   <section id="content-3" class="flip-container flip-from-left">
+    <div id="content-3-handle" class="flip-handle"></div>
     <div class="container-text">
       <h2 class="text-title">
         Videos
@@ -139,9 +141,48 @@
     </div>
   </section>
 
+  <section id="content-4" class="flip-container flip-from-right">
+    <div id="content-4-handle" class="flip-handle"></div>
+    <div class="container-text">
+      <h2 class="text-title">
+        Photos
+        <br>
+        Production
+      </h2>
+      <p  class="text-description">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
+        Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
+      </p>
+      <button class="call-to-action">More infos
+        <span class="arrow-icon">→</span>
+      </button>
+    </div>
+    <div class="phone-container">
+      <img src="/img/phone_face.png" alt="phone">
+    </div>
+  </section>
 
 
-
+  <section id="content-5" class="flip-container flip-from-left">
+    <div id="content-5-handle" class="flip-handle"></div>
+    <div class="container-text">
+      <h2 class="text-title">
+        Videos
+        <br>
+        Production
+      </h2>
+      <p  class="text-description">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
+        Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
+      </p>
+      <button class="call-to-action">More infos
+        <span class="arrow-icon">→</span>
+      </button>
+    </div>
+    <div class="phone-container">
+      <img src="/img/phone_clothes.png" alt="phone">
+    </div>
+  </section>
 
 
 
@@ -194,6 +235,9 @@
   <!--    </div>-->
   <!--  </section>-->
 
+  <div class="credits">
+    B. Lemoine - cipherbliss.com
+  </div>
   <nav class="fixed-nav is-fixed-top">
     <div class="burger-menu is-2">
       <div class="icon-burger">

js/main.js

@@ -34,7 +34,7 @@ gsap.to("#main_title", {
 gsap.to("#phone-watches-1",
   {
     left: 500,
-    top: (531 - 400) ,
+    top: (531 - 400),
     scale: 0.8,
     duration: 1.5,
     ease: "sine",
@@ -43,11 +43,11 @@ gsap.to("#phone-watches-1",
       scrub: 1,
       markers: development_debug,
     }
-})
+  })
 gsap.to("#phone-watches-2",
   {
     left: "50vw",
-    top: 100 ,
+    top: 100,
     scale: 0.7,
     duration: 1.25,
     ease: "sine",
@@ -56,11 +56,11 @@ gsap.to("#phone-watches-2",
       scrub: 1,
       markers: development_debug,
     }
-})
+  })
 gsap.to("#phone-watches-3",
   {
     left: "50vw",
-    top: 0 ,
+    top: 0,
     scale: 0.8,
     duration: 1.25,
     ease: "sine",
@@ -69,11 +69,11 @@ gsap.to("#phone-watches-3",
       scrub: 2,
       markers: development_debug,
     }
-})
+  })
 gsap.to("#phone-watches-4",
   {
     left: "50vw",
-    top: -10 ,
+    top: -10,
     scale: 0.5,
     duration: 3,
     ease: "sine",
@@ -82,12 +82,12 @@ gsap.to("#phone-watches-4",
       scrub: 2,
       markers: development_debug,
     }
-})
+  })
 
 gsap.to("#phone-watches-4",
   {
     left: "50vw",
-    top: -10 ,
+    top: -10,
     scale: 0.5,
     duration: 3,
     ease: "sine",
@@ -138,3 +138,52 @@ gsap.to("#content_all_img",
     }
   })
 
+
+let rotateYCard = "180deg";
+let offsetCard = "-100px";
+// 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,
+    }
+  })
+
+
+
+function animateCard(id, side){
+
+  let fromObject = {
+    rotateY: rotateYCard,
+  }
+  fromObject[side] = offsetCard
+
+  let toObject ={
+    rotateY: 0,
+    duration: 0.2,
+    ease: "easeInOut",
+    scrollTrigger: {
+      trigger: '#content-'+id+' .flip-handle',
+      scrub: 1,
+      markers: development_debug,
+    }
+  }
+  toObject[side] = 0
+
+  gsap.fromTo("#content-"+id, fromObject,
+    toObject)
+}
+
+animateCard(2, 'right')
+animateCard(3, 'left')
+animateCard(4, 'right')
+animateCard(5, 'left')