From fde37ea62639057e24ef397fab42370ba1ba3b42 Mon Sep 17 00:00:00 2001
From: LuDa Yu <ludayu560@gmail.com>
Date: Tue, 20 Sep 2022 13:41:22 -0400
Subject: [PATCH] implemented control section animation as per issue-4

---
 src/landingPage/ControlSection.module.scss | 116 +++++++++++++++------
 src/landingPage/ControlSection.tsx         |  36 +++++--
 2 files changed, 109 insertions(+), 43 deletions(-)

diff --git a/src/landingPage/ControlSection.module.scss b/src/landingPage/ControlSection.module.scss
index 09270f6..5a3ed15 100644
--- a/src/landingPage/ControlSection.module.scss
+++ b/src/landingPage/ControlSection.module.scss
@@ -1,11 +1,17 @@
 @use "foundation/text";
 
+//
+@keyframes scroll {
+	0% { transform: translateX(0); }
+	100% { transform: translateX(calc(16vw * 7 * -1))}
+}
+//
+
 .animationContainer {
-  width: 100%;
+  width: 128vw;
   height: calc(20vh * 2 + 1vw);
   position: relative;
-  overflow-x: clip;
-  overflow-y: visible;
+  display: block;
   margin-bottom: 2rem;
 
   .ghostContainer {
@@ -14,52 +20,73 @@
     grid-template-rows: 20vh 20vh;
     column-gap: 1vw;
     row-gap: 1vw;
-
-    position: absolute;}
+    position: absolute;
+  }
 
   .left {
-    margin-left: -20vw;
+    right: 48.5vw;
+
     :nth-child(1) {
-      grid-column: 1 / span 2;
-      grid-row: 1 / span 2;
+      grid-row: span 2;
     }
-
     :nth-child(2) {
-      grid-column: 3 / span 2;
-      grid-row: 2 / span 1;
+      grid-column: span 2;
     }
-
     :nth-child(3) {
-      grid-column: 3 / span 1;
-      grid-row: 1 / span 1;
+      grid-column: span 2;
     }
-
-    :nth-child(4) {
-      grid-column: 4 / span 2;
-      grid-row: 1 / span 1;
+    :nth-child(5) {
+      grid-column: span 2;
     }
   }
 
   .right {
-    margin-left: 45vw;
+    left: 48.5vw;
+
     :nth-child(1) {
-      grid-column: 4 / span 2;
-      grid-row: 1 / span 2;
+      grid-column: span 2;
+    }
+    :nth-child(3) {
+      grid-row: span 2;
     }
-
     :nth-child(2) {
-      grid-column: 1 / span 2;
-      grid-row: 2 / span 1;
+      grid-column: span 2;
+    }
+    :nth-child(5) {
+      grid-column: span 2;
     }
+  }
+
+  // off screen content 
 
+  .offscreenLeft {
+    left: 112.5vw;
+    :nth-child(1) {
+      grid-row: span 2;
+    }
+    :nth-child(2) {
+      grid-column: span 2;
+    }
     :nth-child(3) {
-      grid-column: 3 / span 1;
-      grid-row: 2 / span 1;
+      grid-column: span 2;
     }
-
-    :nth-child(4) {
-      grid-column: 2 / span 2;
-      grid-row: 1 / span 1;
+    :nth-child(5) {
+      grid-column: span 2;
+    }
+  }
+  .offscreenRight {
+    left: 161vw;
+    :nth-child(1) {
+      grid-column: span 2;
+    }
+    :nth-child(3) {
+      grid-row: span 2;
+    }
+    :nth-child(2) {
+      grid-column: span 2;
+    }
+    :nth-child(5) {
+      grid-column: span 2;
     }
   }
 }
@@ -92,13 +119,36 @@
   align-items: center;
   padding-top: 5rem;
 
+  overflow: hidden;
+
   p {
     text-align: center;
     width: 75rem;
     max-width: 80vw;
   }
-}
 
-.out {
-  display: none;
+  // attempt at implementing a autoscroll carousel
+  &::before,
+	&::after {
+		content: "";
+		position: absolute;
+		z-index: 2;
+	}
+
+  &::after {
+		right: 0;
+		transform: rotateZ(180deg);
+	}
+
+	&::before {
+		left: 0;
+	}
+
+  .animationContainer {
+    // setting animation speed < 20 (i.e. faster) will make the site look weird
+		animation: scroll 20s linear infinite;
+		display: flex;
+		width: 128vw;
+	}
+  //
 }
\ No newline at end of file
diff --git a/src/landingPage/ControlSection.tsx b/src/landingPage/ControlSection.tsx
index 2e41385..483ba04 100644
--- a/src/landingPage/ControlSection.tsx
+++ b/src/landingPage/ControlSection.tsx
@@ -18,37 +18,53 @@ const ControlSection = () => {
       }
     },
   });
+  const ghostBlock = <GhostBlock rounded={true}/>;
 
-  const ghostBlock = <GhostBlock rounded={true} />;
+  // this gets translated to classnames.
+  const animationClassname = (direction:String) => { return inView? `animate__animated animate__slideIn${direction} animate__slower` : 'animate__animated animate__fadeOut'}
 
   return (
     <section className={styles.container} ref={ref} id='control'>
-      <div className={styles.animationContainer}>
-        <div className={`${styles.left} ${styles.ghostContainer} 
-                      ${inView? `animate__animated animate__slideInLeft animate__slow` : 'animate__animated animate__fadeOut'}`}>
+      <div className={`${styles.animationContainer} animate_animated `}>
+        <div className={`${styles.left} ${styles.ghostContainer} ${animationClassname("Left")}`}>  
           {ghostBlock}
           {ghostBlock}
+          <div></div>
           {ghostBlock}
           {ghostBlock}
         </div>
-        <div className={`${styles.right} ${styles.ghostContainer} 
-                      ${inView? `animate__animated animate__slideInRight animate__slow` : 'animate__animated animate__fadeOut'}`}>
+        <div className={`${styles.right} ${styles.ghostContainer} ${animationClassname("Right")}`}>
           {ghostBlock}
           {ghostBlock}
           {ghostBlock}
+          <div></div>
+          {ghostBlock}
+          {ghostBlock}
+        </div>
+        <div className={`${styles.offscreenLeft} ${styles.ghostContainer}`}>
+          <div></div>
+          {ghostBlock}
+          <div></div>
+          {ghostBlock}
+          {ghostBlock}
+        </div>
+        <div className={`${styles.offscreenRight} ${styles.ghostContainer}`}>
+          {ghostBlock}
+          {ghostBlock}
+          {ghostBlock}
+          <div></div>
+          {ghostBlock}
           {ghostBlock}
         </div>
       </div>
 
       <div className={styles.headerContainer}>
         <h1
-          className={`${styles.left} ${styles.title} 
-                      ${inView? `animate__animated animate__slideInLeft animate__slow` : 'animate__animated animate__fadeOut'}`}>
+          className={`${styles.left} ${styles.title} ${animationClassname("Left")}`}>  
           total control
         </h1>
         <h1
-          className={`${styles.right} ${styles.title} 
-                      ${inView? `animate__animated animate__slideInRight animate__slow` : 'animate__animated animate__fadeOut'}`}>
+          className={`${styles.right} ${styles.title} ${animationClassname("Right")}`}>
           endless fidelity.
         </h1>
       </div>