From a82ae2cd47c2093f73071f75b7b50c74c1b62438 Mon Sep 17 00:00:00 2001
From: "E. Almqvist" <elalmqvist@gmail.com>
Date: Wed, 25 Jan 2023 16:33:24 +0100
Subject: [PATCH] Added animation to scrollMe

---
 components/scrollme.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/components/scrollme.tsx b/components/scrollme.tsx
index 3e4eff2..d5763c3 100644
--- a/components/scrollme.tsx
+++ b/components/scrollme.tsx
@@ -8,6 +8,9 @@ const ScrollMeWrapper = styled.div`
   bottom: 2rem;
   left: 50%;
   color: var(--fg-faded);
+  animation-name: scrollMeAnim;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
 
   @media only screen and (max-height: 490px) {
     display: none;
@@ -21,15 +24,31 @@ const ScrollMeWrapper = styled.div`
     width: 1.2rem;
     height: auto;
   }
+
+  @keyframes scrollMeAnim {
+    0% {
+      opacity: 0;
+      transform: translateY(0);
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateY(.75rem);
+    }
+  }
 `;
 
 const ScrollMe = (props: SVGProps<SVGSVGElement> & { href: string }) => {
   const handleScroll = () => {
     const sectionRef = document.querySelector(props.href);
     if (sectionRef) {
-	sectionRef.scrollIntoView({ behavior: "smooth" });
+      sectionRef.scrollIntoView({ behavior: "smooth" });
     }
-  }
+  };
 
   return (
     <ScrollMeWrapper onClick={handleScroll}>