Added: Animation Smoothness added.

StaticMania · Aug 9, 2024 · ea2560a · ea2560a
1 parent a9547c2
commit ea2560a
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 105 deletions.
diff --git a/app/docs/components/card/variant/ProductCard.tsx b/app/docs/components/card/variant/ProductCard.tsx
@@ -5,7 +5,7 @@ const ProductCard = () => {
   return (
     <Card>
       <CardHeader>
-        <Image src="https://via.placeholder.com/600x400" alt="image" width={600} height={400} />
+        <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
       </CardHeader>
       <CardContent className="space-y-3">
         <CardTitle>Lorem ipsum dolor sit</CardTitle>
@@ -27,7 +27,7 @@ export const CardComponent = () => {
   return (
     <Card>
       <CardHeader>
-        <Image src="https://via.placeholder.com/600x400" alt="image" width={600} height={400} />
+        <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
       </CardHeader>
       <CardContent className="space-y-3">
         <CardTitle>Lorem ipsum dolor sit</CardTitle>

diff --git a/app/docs/components/popover/variant/CardPopover.tsx b/app/docs/components/popover/variant/CardPopover.tsx
@@ -8,13 +8,7 @@ const CardPopover = () => {
       <Popover placement="left">
         <PopoverAction>Left</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -27,13 +21,7 @@ const CardPopover = () => {
       <Popover placement="right">
         <PopoverAction>Right</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -46,13 +34,7 @@ const CardPopover = () => {
       <Popover placement="top">
         <PopoverAction>Top</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -65,13 +47,7 @@ const CardPopover = () => {
       <Popover placement="bottom">
         <PopoverAction>Bottom</PopoverAction>
         <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-          <Image
-            src="https://via.placeholder.com/600x400"
-            className="rounded-t-xl"
-            alt="image"
-            width={600}
-            height={300}
-          />
+          <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
           <div className="space-y-2 p-6">
             <PopoverHeading>Keep Design System</PopoverHeading>
             <PopoverDescription>
@@ -95,13 +71,7 @@ export const PopoverComponent = () => {
     <Popover placement="left">
       <PopoverAction>Left</PopoverAction>
       <PopoverContent className="z-20 max-w-[300px] rounded-xl bg-white dark:bg-metal-900">
-        <Image
-          src="https://via.placeholder.com/600x400"
-          className="rounded-t-xl"
-          alt="image"
-          width={600}
-          height={300}
-        />
+        <Image src="/images/keep-card.jpg" className="rounded-t-xl" alt="image" width={600} height={300} />
         <div className="space-y-2 p-6">
           <PopoverHeading>Keep Design System</PopoverHeading>
           <PopoverDescription>

diff --git a/app/docs/components/popover/variant/IconPopover.tsx b/app/docs/components/popover/variant/IconPopover.tsx
@@ -7,7 +7,7 @@ const IconPopover = () => {
     <div className="flex h-52 items-center justify-center gap-5">
       <Popover placement="left">
         <PopoverAction>Left</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -29,7 +29,7 @@ const IconPopover = () => {
       </Popover>
       <Popover placement="right">
         <PopoverAction>Right</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -51,7 +51,7 @@ const IconPopover = () => {
       </Popover>
       <Popover placement="top">
         <PopoverAction>Top</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -73,7 +73,7 @@ const IconPopover = () => {
       </Popover>
       <Popover placement="bottom">
         <PopoverAction>Bottom</PopoverAction>
-        <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+        <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 shadow-sm dark:border-metal-800 dark:bg-metal-900">
           <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
             <Confetti size={24} weight="fill" />
           </div>
@@ -107,7 +107,7 @@ export const PopoverComponent = () => {
   return (
     <Popover placement="right">
       <PopoverAction>Right</PopoverAction>
-      <PopoverContent className="z-20 max-w-xs rounded-xl border border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900">
+      <PopoverContent className="z-20 max-w-xs rounded-xl bg-white p-6 dark:border-metal-800 dark:bg-metal-900 shadow-sm">
         <div className="flex size-14 items-center justify-center rounded-full bg-metal-50 text-metal-900 dark:bg-metal-800 dark:text-white">
           <Confetti size={24} weight="fill" />
         </div>

diff --git a/app/src/components/Drawer/DrawerContent.tsx b/app/src/components/Drawer/DrawerContent.tsx
@@ -23,7 +23,12 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(({ children
             {...props}
             ref={ref}
             className={cn(keepDrawerTheme.content.base, keepDrawerTheme.content.position[position], className)}>
-            {children}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, transition: { duration: 0.3, delay: 0.3 } }}
+              exit={{ opacity: 0 }}>
+              {children}
+            </motion.div>
           </motion.div>
         </DrawerPortal>
       )}

diff --git a/app/src/components/Drawer/animation.ts b/app/src/components/Drawer/animation.ts
@@ -10,22 +10,22 @@ export interface DrawerVariantsProps {
 const drawerVariants: DrawerVariantsProps = {
   left: {
     initial: { x: '-100%', opacity: 0.5 },
-    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, x: '-100%' },
   },
   right: {
     initial: { x: '100%', opacity: 0.5 },
-    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, height: '100%', x: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, x: '100%' },
   },
   top: {
     initial: { y: '-100%', opacity: 0.5 },
-    animate: { opacity: 1, height: 'auto', y: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, height: 'auto', y: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, y: '-100%' },
   },
   bottom: {
     initial: { y: '100%', opacity: 0.5 },
-    animate: { opacity: 1, overflow: 'hidden', y: 0, transition: { duration: 0.5, ease: 'anticipate' } },
+    animate: { opacity: 1, overflow: 'hidden', y: 0, transition: { duration: 0.3, ease: 'anticipate' } },
     exit: { opacity: 1, y: '100%' },
   },
 }

diff --git a/app/src/components/Dropdown/List.tsx b/app/src/components/Dropdown/List.tsx
@@ -18,8 +18,11 @@ export const DropdownList = forwardRef<HTMLDivElement, DropdownListProps>(
           y: 0,
           height: '100%',
           transition: {
-            duration: 0.2,
-            delay: 0.3,
+            type: 'spring',
+            duration: 0.3,
+            delay: 0.1,
+            damping: 25,
+            stiffness: 500,
           },
         }}
         exit={{ opacity: 0, y: '10px', height: 0 }}

diff --git a/app/src/components/Modal/ModalContent.tsx b/app/src/components/Modal/ModalContent.tsx
@@ -13,18 +13,18 @@ const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
     return (
       <AnimatePresence>
         {isOpen && (
-          <ModalPortal>
+          <ModalPortal key="modal">
             <motion.div
               {...props}
               className={cn(
                 'modal-content relative w-[22rem] rounded-xl bg-white p-5 shadow-xLarge dark:bg-metal-900',
                 className,
               )}
               ref={ref}
-              initial={{ scale: 0.9, opacity: 0.5 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.2 }}
-              exit={{ opacity: 0, scale: 0.9 }}>
+              initial={{ scale: 0.5, opacity: 0, y: 40 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              transition={{ duration: 0.3, type: 'spring', damping: 25, stiffness: 500 }}
+              exit={{ opacity: 0.5, scale: 0.5, y: 40 }}>
               {children}
             </motion.div>
           </ModalPortal>

diff --git a/app/src/components/Notification/NotificationContent.tsx b/app/src/components/Notification/NotificationContent.tsx
@@ -27,28 +27,53 @@ const contentTheme = {
 
 const NotificationDirection: VariantsProps = {
   'top-left': {
-    initial: { opacity: 0, y: '-100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '-100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '-100%' },
   },
   'top-right': {
-    initial: { opacity: 0, y: '-100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '-100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '100%' },
   },
   'bottom-left': {
-    initial: { opacity: 0, y: '100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '-100%' },
   },
   'bottom-right': {
-    initial: { opacity: 0, y: '100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, x: '100%' },
   },
   center: {
-    initial: { opacity: 0, y: '-100%' },
-    animate: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'anticipate' } },
+    initial: { opacity: 0, y: '-100%', scale: 0.9 },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.3, type: 'spring', damping: 30, stiffness: 500 },
+    },
     exit: { opacity: 0, y: '-100%' },
   },
 }

diff --git a/app/src/components/Popover/animation.ts b/app/src/components/Popover/animation.ts
@@ -11,73 +11,97 @@ const popoverVariants: PopoverIVariants = {
   top: {
     initial: {
       opacity: 0,
-      y: '8px',
+      y: '10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
+      scale: 1,
       y: 0,
+      transformOrigin: 'bottom center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
+      scale: 0.8,
       opacity: 0,
-      y: '4px',
+      y: '10px',
     },
   },
   bottom: {
     initial: {
       opacity: 0,
-      y: '8px',
+      y: '10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       y: 0,
+      scale: 1,
+      transformOrigin: 'top center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
-      y: '4px',
+      y: '10px',
+      scale: 0.8,
     },
   },
   left: {
     initial: {
       opacity: 0,
-      x: '-8px',
+      x: '-10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
+      transformOrigin: 'right center',
       x: 0,
+      scale: 1,
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
+      scale: 0.8,
       opacity: 0,
-      x: '-4px',
+      x: '-10px',
     },
   },
   right: {
     initial: {
       opacity: 0,
-      x: '20px',
+      x: '10px',
+      scale: 0.8,
     },
     animate: {
       opacity: 1,
       x: 0,
+      scale: 1,
+      transformOrigin: 'left center',
       transition: {
         duration: 0.3,
-        ease: 'anticipate',
+        type: 'spring',
+        damping: 25,
+        stiffness: 500,
       },
     },
     exit: {
       opacity: 0,
-      x: '4px',
+      x: '10px',
+      scale: 0.8,
     },
   },
 }