Delete moving arrow animation (#208)

* remove moving animation * Update src/components/ScrollDownArrow/styles.scss Co-authored-by: Ronak Shah <[email protected]> * fade back in arrow Co-authored-by: Ronak Shah <[email protected]>
acmucsd · Feb 18, 2022 · dd08116 · dd08116 · vercel · Feb 18, 2022
1 parent 7a278de
commit dd08116
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/src/components/ScrollDownArrow/index.tsx b/src/components/ScrollDownArrow/index.tsx
@@ -11,10 +11,10 @@ const ScrollDownArrow = () => {
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
-  return scrolled ? null : (
+  return (
     <img
-      className="arrow"
-      alt=""
+      className={`arrow ${scrolled ? 'hide' : 'show'}`}
+      alt="Scroll Arrow"
       onClick={() =>
         window.scrollBy({
           top: window.innerHeight - 78,

diff --git a/src/components/ScrollDownArrow/styles.scss b/src/components/ScrollDownArrow/styles.scss
@@ -1,32 +1,38 @@
 .arrow {
   cursor: pointer;
-  left: 50vw;
+  left: calc(50vw - 15px);
   bottom: 50px;
   height: 30px;
   margin: auto;
   position: absolute;
   width: 30px;
-  animation: ca3_fade_move_down 1.5s ease-in-out infinite;
-
-  @keyframes ca3_fade_move_down {
-    0% {
-      transform: translate(0, -10px);
-      opacity: 0;
-    }
-    35% {
-      opacity: 1;
-    }
-    70% {
-      transform: translate(0, 10px);
-      opacity: 0;
-    }
-    100% {
-      transform: translate(0, 10px);
-      opacity: 0;
-    }
-  }
-
   @media only screen and (max-width: 1050px) {
     display: none;
   }
-}
+}
+// ensures the scroll down button fades away as the user scrolls down
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.hide {
+  animation: hide 0.5s linear 0s 1 normal forwards;
+}
+
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.show {
+  animation: show 0.5s linear 0s 1 normal forwards;
+}