💫 anm: add scroll down animation

Bear29ers · Jul 10, 2024 · f858d4e · f858d4e
1 parent 65ee522
commit f858d4e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/ui/gallery/ScrollDown/ScrollDown.tsx b/src/components/ui/gallery/ScrollDown/ScrollDown.tsx
@@ -4,8 +4,8 @@ import { motion } from 'framer-motion';
 
 const ScrollDown: FC = () => {
   return (
-    <motion.div className="absolute bottom-0 left-1/2 z-40 h-40 w-full max-w-[337px] -translate-x-1/2 bg-gradient-to-transparent flex-center">
-      <button type="button" className="w-12" aria-label="scroll-down">
+    <motion.div className="absolute bottom-0 left-1/2 z-40 h-40 w-full max-w-[337px] -translate-x-1/2 bg-gradient-to-transparent">
+      <button type="button" className="absolute inset-x-0 bottom-10 mx-auto w-12 animate-down" aria-label="scroll-down">
         <svg width="100%" height="100%" viewBox="0 0 310 177">
           <path
             fill="#000"

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -121,6 +121,14 @@ const config: Config = {
           '0%': { transform: 'rotate(0deg)' },
           '100%': { transform: 'rotate(-10deg)' },
         },
+        down: {
+          '0%': {
+            transform: 'translateY(-10px)',
+          },
+          '100%': {
+            transform: 'translateY(0)',
+          },
+        },
       },
       animation: {
         updown: 'updown 2s infinite alternate',
@@ -130,6 +138,7 @@ const config: Config = {
         wave: 'wave 2.5s infinite alternate',
         hit: 'hit 0.4s cubic-bezier(0.63, 0.09, 0.75, 0.46) infinite alternate',
         bounce: 'bounce 0.4s cubic-bezier(0.63, 0.09, 0.76, 0.45) infinite alternate',
+        down: 'down 0.6s 0.6s ease-in infinite alternate forwards',
       },
     },
   },