add backToTop component with animation

Author: frontendfixer

src/components/BackToTop.tsx

@@ -0,0 +1,40 @@
+import { faArrowCircleUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useState } from 'react';
+
+const BackToTop = () => {
+  const [visible, setVisible] = useState(false);
+  const [top, setTop] = useState(0);
+
+  const handleClick = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    const intersectionObserver = new IntersectionObserver(entries => {
+      setTop(entries[0].boundingClientRect.top);
+      if (top <= 0) {
+        return setVisible(true);
+      } else setVisible(false);
+    });
+    window.addEventListener('scroll', () => {
+      intersectionObserver.observe(document.querySelectorAll('section')[1]);
+    });
+  }, [top]);
+
+  return (
+    <div
+      className="animate-slideLeft fixed bottom-6 right-0 z-50 w-14 rounded-l-full bg-red-500 shadow-lg"
+      hidden={!visible}
+    >
+      <button
+        onClick={handleClick}
+        className="animate-fadeIn grid h-10 w-10 place-content-center rounded-full p-2 text-2xl text-white"
+      >
+        <FontAwesomeIcon icon={faArrowCircleUp} />
+      </button>
+    </div>
+  );
+};
+
+export default BackToTop;

src/routes/Home.tsx

@@ -1,3 +1,4 @@
+import BackToTop from '../components/BackToTop';
 import Contact from '../components/Contact';
 import Container from '../components/Container';
 import Footer from '../components/Footer';
@@ -8,6 +9,7 @@ import RecentWork from '../components/RecentWork';
 const Home = () => {
   return (
     <>
+      <BackToTop />
       <main className="bg-gray-50 dark:bg-dark-900">
         <section
           id="hero"

tailwind.config.js

@@ -21,13 +21,25 @@ export default {
         },
       },
       animation: {
-        'wiggly-motion': 'wiggle 3s linear infinite alternate',
+        slideUp: 'slideUp 0.5s ease-in-out forwards',
+        slideLeft: 'slideLeft 0.5s ease-in-out forwards',
+        fadeIn: 'fadeIn 0.5s ease-in-out forwards',
       },
       keyframes: {
-        wiggle: {
-          '0%': { transform: 'translate(10px, 10px)' },
-          '50%': { transform: 'translate(0)' },
-          '100%': { transform: 'translate(-10px, -10px)' },
+        slideUp: {
+          '0%': { transform: 'translateY(100px) scale(0.8)' },
+          '100%': { transform: 'translateY(0) scale(1)' },
+        },
+        slideLeft: {
+          '0%': { transform: 'translateX(100px) scale(1.2, 1)' },
+          '50%': { transform: 'translateX(0) scale(1.3, 1)' },
+          '70%': { transform: 'translateX(0) scale(1.1, 1)' },
+          '90%': { transform: 'translateX(0) scale(0.9, 1)' },
+          '100%': { transform: 'translateX(0) scale(1)' },
+        },
+        fadeIn: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 },
         },
       },
     },