gather open zone

css/3-open-sesame.css

@@ -4,7 +4,7 @@
 
   position: relative;
 
-  top: 223vh;
+  top: 88vh;
   font-style: normal;
   font-weight: 600;
   font-size: 200px;
@@ -12,11 +12,11 @@
   text-align: center;
   letter-spacing: -0.04em;
   color: rgba(248, 243, 241, 0.1);
-  height: 100vh;
   padding-top: 310px;
   padding-bottom: 310px;
 
   color: rgba(248, 243, 241, 0.1);
+  height: 50vh;
 }
 
 #open .text {

css/4-content.css

@@ -1,33 +1,4 @@
 
-#content_all {
-  position: relative;
-  top: 200vh;
-  padding-top: 100px;
-  color: #FFFDFC;
-}
-#content_all_img{
-  background: url('/img/bg_content.png');
-  background-size: cover;
-  width: 90vw;
-  height: 90vh;
-}
-
-#content_all .columns {
-  margin: 0 auto;
-  max-width: 80vw;
-  top: -100vh;
-  position: relative;
-}
-
-#content_all .text {
-  padding-top: 1vh;
-  padding-left: 80px;
-}
-#content_all .color-emphasis {
-  color: #1E33DA;
-}
-
-
 #content {
   height: 200px;
   min-height: 200px;
@@ -36,6 +7,53 @@
   margin-top: 33vh;
 }
 
+#content_all {
+  position: relative;
+  top: 55vh;
+  padding-top: 100px;
+  color: #FFFDFC;
+}
+#content_all_img{
+  background: url('/img/bg_content.png');
+  background-size: cover;
+  width: 100vw;
+  height: 150vh;
+  margin-top: -50vh;
+  left:0;
+  position: relative;
+}
+
+#content_all .columns {
+  margin: 0 auto;
+  max-width: 80vw;
+  top: -150vh;
+  position: relative;
+}
+
+#content_all .text {
+  padding-top: 1vh;
+  padding-left: 80px;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  text-align:left;
+}
+main #content_all .columns > .column:nth-of-type(0) {
+  font-size: 100px !important;
+  line-height: 90px;
+  letter-spacing: -0.04em;
+}
+#content_all .columns > .column:nth-of-type(1) {
+  font-size: 1em;
+  line-height: 90px;
+  letter-spacing: -0.04em;
+}
+#content_all .color-emphasis {
+  color: #1E33DA;
+}
+
+
+
 #content_first {
 
   opacity: 0;
@@ -174,3 +192,13 @@
   border-width: 5px;
   border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
 }
+
+
+#content-2{
+  margin-top:50vh;
+}
+
+#flipping_zone{
+  margin-top: -100vh;
+  position: relative;
+}

index.html

@@ -100,6 +100,7 @@
     </section>
 
   <!--  flipping zones-->
+  <div id="flipping_zone">
     <section id="content-2" class="flip-container flip-from-right">
       <div id="content-2-handle" class="flip-handle"></div>
       <div class="container-text">
@@ -186,6 +187,8 @@
 
 
 
+  </div>
+
 
   <!--  other section-->
     <section id="popover" class="slider-screen">

js/main.js

@@ -1,7 +1,8 @@
 /**
  * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
  */
-let development_debug = true;
+let development_debug = false;
+
 gsap.fromTo("#main_title", {
   opacity: 0,
   top: 200
@@ -138,10 +139,10 @@ gsap.fromTo("#content_all_img",
   left:-100},
   {
     scale: 1,
-    left:0,
-    ease: "easeInOut",
+    left:-80,
+    ease: "linear",
     scrollTrigger: {
-      trigger: '#content',
+      trigger: '#content_all .columns',
       scrub: 1,
       markers: development_debug,
     }