fix: increase slideOut distance and use display property (#182)

* fix: increase slideOut distance and use display property

* feat: utilize Framer Motion to animate back to top button

src/components/button/BackToTopButton.tsx

@@ -5,62 +5,60 @@ import { faChevronUp } from "@fortawesome/pro-solid-svg-icons";
 import React, { useState, useEffect, useContext } from "react";
 import theme from "theme";
 import { withHover } from "styles/mixins";
-import { slideIn, slideOut } from "styles/animations";
 import PlayerContext from "context/playerContext";
+import { AnimatePresence, m } from "framer-motion";
 
-const ScrollButton = styled(Button)<{ $bottomOffset: number }>`
+const ScrollButton = styled(m(Button))<{ $bottomOffset: number }>`
   position: fixed;
   right: 16px;
   bottom: ${(props) => 16 + props.$bottomOffset}px;
   padding: 16px;
 
-  visibility: ${(props) => (props.isVisible ? "visible" : "hidden")};
-  animation: ${(props) => props.animation} 200ms both;
-  transition: all 200ms;
-
   ${withHover`
-    background-color: ${theme.colors["solid-on-card"]}; 
-    color: ${theme.colors["text-primary"]}; 
-  `}
+      background-color: ${theme.colors["solid-on-card"]}; 
+      color: ${theme.colors["text-primary"]}; 
+    `}
 `;
 
 export function BackToTopButton() {
-    const [isButtonVisible, setIsButtonVisible] = useState(false);
-    const [animation, setAnimation] = useState(slideIn());
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
+  const { currentWatchListItem } = useContext(PlayerContext);
 
-    const { currentWatchListItem } = useContext(PlayerContext);
+  function scrollUp() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
 
-    useEffect(() => {
-        function handleScroll() {
-            if (window.scrollY > 2000) {
-                setIsButtonVisible(true);
-                setAnimation(slideIn());
-            } else {
-                setIsButtonVisible(false);
-                setAnimation(slideOut("150%", "0"));
-            }
-        }
-        window.addEventListener("scroll", handleScroll);
-        return () => window.removeEventListener("scroll", handleScroll);
-    }, []);
-
-    function scrollUp() {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth",
-        });
+  useEffect(() => {
+    function handleScroll() {
+      if (window.scrollY > 2000) {
+        setIsButtonVisible(true);
+      } else {
+        setIsButtonVisible(false);
+      }
     }
-    return (
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return (
+    <AnimatePresence>
+      {isButtonVisible ? (
         <ScrollButton
-            variant="primary"
-            isCircle={true}
-            onClick={scrollUp}
-            isVisible={isButtonVisible}
-            animation={animation}
-            onMouseDown={(event:React.PointerEvent) => event.preventDefault()}
-            $bottomOffset={currentWatchListItem ? 76 : 0}
+          key={"scrollButton"}
+          initial={{ y: "150%" }}
+          animate={{ y: "0" }}
+          exit={{ y: "450%" }}
+          variant="primary"
+          isCircle={true}
+          onClick={scrollUp}
+          onMouseDown={(event: React.PointerEvent) => event.preventDefault()}
+          $bottomOffset={currentWatchListItem ? 76 : 0}
         >
-            <Icon icon={faChevronUp} />
+          <Icon icon={faChevronUp} />
         </ScrollButton>
-    );
+      ) : null}
+    </AnimatePresence>
+  );
 }