From 57f0487f651ad21419995907badfdf910a7b2379 Mon Sep 17 00:00:00 2001
From: katamaz <ktkz@duck.com>
Date: Mon, 31 Aug 2026 12:37:08 +0300
Subject: [PATCH] another animation improve

---
 src/trash/trash-components.jsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/trash/trash-components.jsx b/src/trash/trash-components.jsx
index 5338442..d508841 100644
--- a/src/trash/trash-components.jsx
+++ b/src/trash/trash-components.jsx
@@ -126,7 +126,7 @@ export const DatePicker = (props) => {
   const layoutGroupId = useId();
 
   return (
-    <div
+    <motion.div
       className={`flex items-center justify-between px-2 py-1 w-full bg-grain ${
         !props.pink ? "border-zinc-800/40" : "border-pink-500/20"
       } border rounded-2xl relative`}
@@ -140,19 +140,21 @@ export const DatePicker = (props) => {
         <AnimatePresence mode="wait">
           <motion.span
             key={formatDate(props.date)}
-            className={`cursor-pointer flex items-center z gap-1 justify-center w-[80%] lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl text-zinc-300 ${
+            className={`cursor-pointer flex relative items-center z gap-1 justify-center w-[80%] lg:hover:text-black *:transition-colors transition-colors p-1 rounded-3xl text-zinc-300 ${
               !props.pink
                 ? "lg:hover:bg-white lg:hover:*:text-black"
                 : "lg:hover:bg-pink-500 lg:hover:*:text-white"
             } px-3 overflow-hidden `}
             variants={{
-              a: { opacity: 0 },
+              a: { opacity: 0.3 },
               b: { opacity: 1 },
             }}
             initial="a"
             animate="b"
-            transition={{ duration: 0.2 }}
+            transition={{ duration: 0.1 }}
             exit="a"
+            layoutRoot
+            layout="position"
             onClick={() => {
               if (apiFormatDate(props.date) != apiFormatDate(new Date()))
                 trigger([
@@ -197,7 +199,9 @@ export const DatePicker = (props) => {
                 </motion.div>
                 <motion.span
                   initial={{ opacity: 0 }}
-                  transition={{ delay: 0.1 }}
+                  transition={{ delay: 0.05 }}
+                  layoutId="datepicker_date_if"
+                  layout="position"
                   animate={{ opacity: 1 }}
                   className="text-zinc-600 italic"
                 >
@@ -214,7 +218,7 @@ export const DatePicker = (props) => {
         setDate={props.setDate}
         pink={props.pink}
       />
-    </div>
+    </motion.div>
   );
 };