From 502ed41b6654ecd6c5d97d92a3189ae63e43fb38 Mon Sep 17 00:00:00 2001
From: cyrus <cyrus@zerolend.xyz>
Date: Wed, 28 Jan 2026 19:27:26 +0530
Subject: [PATCH] Improve settings modal animations with slide-from-right and
 optimized timing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added slide-right animation with 300ms duration for smoother modal entry
- Updated SettingsLayout to use new slide-right animation instead of fade-up
- Enhanced animation timing with cubic-bezier easing for premium feel
- Updated useSettingsAnimation hooks for consistent 300ms panel transitions
- Applied animations to all settings modals and sub-panels consistently

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/settings/SettingsLayout.tsx            |  6 +++---
 src/components/settings/hooks/useSettingsAnimation.ts |  6 +++---
 tailwind.config.js                                    | 11 +++++++++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx
index b69ccdc7e..9ef58017a 100644
--- a/src/components/settings/SettingsLayout.tsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -55,10 +55,10 @@ const SettingsLayout = ({ children, onClose }: SettingsLayoutProps) => {
     >
       <div
         ref={modalRef}
-        className="glass rounded-3xl shadow-large w-full max-w-[520px] h-[800px] overflow-hidden animate-fade-up focus:outline-none focus:ring-0"
+        className="glass rounded-3xl shadow-large w-full max-w-[520px] h-[800px] overflow-hidden animate-slide-right focus:outline-none focus:ring-0"
         style={{
-          animationDuration: '200ms',
-          animationTimingFunction: 'ease-out',
+          animationDuration: '300ms',
+          animationTimingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
           animationFillMode: 'both'
         }}
         tabIndex={-1}
diff --git a/src/components/settings/hooks/useSettingsAnimation.ts b/src/components/settings/hooks/useSettingsAnimation.ts
index fa960caf6..7488c75ea 100644
--- a/src/components/settings/hooks/useSettingsAnimation.ts
+++ b/src/components/settings/hooks/useSettingsAnimation.ts
@@ -10,7 +10,7 @@ interface SettingsAnimationHook {
 }
 
 export const useSettingsAnimation = (
-  duration = 200
+  duration = 300
 ): SettingsAnimationHook => {
   const [animationState, setAnimationState] = useState<AnimationState>('exited');
 
@@ -39,7 +39,7 @@ export const useSettingsAnimation = (
 };
 
 // Hook for panel slide animations (slide from right)
-export const usePanelAnimation = (isActive: boolean, duration = 250) => {
+export const usePanelAnimation = (isActive: boolean, duration = 300) => {
   const [mounted, setMounted] = useState(isActive);
 
   useEffect(() => {
@@ -52,7 +52,7 @@ export const usePanelAnimation = (isActive: boolean, duration = 250) => {
   }, [isActive, duration]);
 
   const getPanelClasses = () => {
-    const baseClasses = 'transition-all duration-250 ease-out';
+    const baseClasses = 'transition-all duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]';
     if (!mounted) return `${baseClasses} opacity-0`;
 
     return isActive
diff --git a/tailwind.config.js b/tailwind.config.js
index 23af20fe7..d9d4e8fcf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -202,6 +202,7 @@ module.exports = {
         'fade-in': 'fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
         'fade-up': 'fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
         'slide-in': 'slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'slide-right': 'slideRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
         'scale-in': 'scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         'shimmer': 'shimmer 2s linear infinite',
         'glow-pulse': 'glowPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
@@ -222,6 +223,10 @@ module.exports = {
           '0%': { transform: 'translateX(-100%)' },
           '100%': { transform: 'translateX(0)' },
         },
+        slideRight: {
+          '0%': { opacity: '0', transform: 'translateX(100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
         scaleIn: {
           '0%': { transform: 'scale(0.95)', opacity: '0' },
           '100%': { transform: 'scale(1)', opacity: '1' },
@@ -262,6 +267,12 @@ module.exports = {
         'gradient-mesh': 'linear-gradient(to right, #5B9BF3 0%, #9B8AFB 25%, #6EE7B7 50%, #7DD3FC 75%, #5B9BF3 100%)',
         'noise': "url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\"%3E%3Cfilter id=\"noise\"%3E%3CfeTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"4\" /%3E%3C/filter%3E%3Crect width=\"100\" height=\"100\" filter=\"url(%23noise)\" opacity=\"0.03\" /%3E%3C/svg%3E')",
       },
+
+      // Extended transition duration for smooth animations
+      transitionDuration: {
+        '300': '300ms',
+        '400': '400ms',
+      },
     },
   },
   plugins: [