update animation

xavimondev · Apr 5, 2024 · 463863c · 463863c
1 parent 3090ed6
commit 463863c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/src/components/sections-loader.tsx b/src/components/sections-loader.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { motion } from 'framer-motion'
 import { LoaderIcon } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
@@ -21,14 +20,7 @@ export function SectionsLoader() {
             <LoaderIcon size={18} className='animate-spin' />
           )
         return (
-          <motion.li
-            className='flex gap-3'
-            key={id}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 20 }}
-            transition={{ duration: 0.3 }}
-          >
+          <li className='flex gap-3 animate-fade-slide' key={id}>
             {icon}
             <span
               className={cn('transition-opacity duration-200', {
@@ -39,7 +31,7 @@ export function SectionsLoader() {
             >
               {status === 'completed' ? 'Added' : 'Adding'} {name}...
             </span>
-          </motion.li>
+          </li>
         )
       })}
     </ul>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -121,6 +121,10 @@ const config: Config = {
           '50%': { transform: 'rotate(0eg)' },
           '75%': { transform: 'rotate(-5deg)' },
           '100%': { transform: 'rotate(0deg)' }
+        },
+        'fade-slide': {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1' }
         }
       },
       animation: {
@@ -132,7 +136,8 @@ const config: Config = {
         'border-width': 'border-width 3s infinite alternate',
         'blurred-fade-in': 'blurred-fade-in 0.4s ease-in-out both',
         'drop-bounce': 'drop-bounce 1.5s ease-in-out both var(--duration)',
-        shaking: 'tilt-shaking 0.30s infinite'
+        shaking: 'tilt-shaking 0.30s infinite',
+        'fade-slide': 'fade-slide 0.3s forwards'
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',