struggle with animations...

src/components/Main/Integrations/IntegrationItem.tsx

@@ -17,10 +17,8 @@ export function IntegrationItem({
   return (
     <div
       className={
-        'pointer-events-none transition-transform flex flex-col min-w-[31.7vw] h-[31.6vw] max-w-[48vw] max-h-[48vw] ' +
-        current
-          ? ' scale-[calc(48/31.7)] transition-all'
-          : ''
+        'pointer-events-none transition-all flex flex-col min-w-[31.6vw] min-h-[31.8vw] [&:nth-child(2)]:animate-scaling'
+        // (current ? ' animate-scaling' : '')
       }
     >
       <Image
@@ -28,9 +26,12 @@ export function IntegrationItem({
         alt={''}
         fill
         objectFit="cover"
-        className={'!static mb-4 min-w-[31.7vw] min-h-[26.9vw]'}
+        className={
+          '!relative transition-all flex-1 [&:nth-]' +
+          (current ? '' : ' flex-1')
+        }
       />
-      <div className={current ? 'scale-[calc(31.7/48)] transition-all' : ''}>
+      <div className="mt-4">
         <div className={`flex justify-between mb-${!current ? 1 : 2}`}>
           <h4 className="h4 font-medium">{title}</h4>
           <h4 className="h4 font-medium">{year}</h4>

src/ui/SliderWithScaling.tsx

@@ -99,7 +99,7 @@ export function SliderWithScaling<T>({
             ref={ref}
             className="flex items-start gap-x-4 -mr-6 relative select-none"
             style={{
-              transition: `${sliderOffset === 0 || sliderOffset === baseoffset * 2 ? 0 : 0.5}s`,
+              transition: `${sliderOffset === 0 || sliderOffset === baseoffset * 2 ? 0 : 1}s`,
               transform: `translateX(${sliderOffset}px)`,
             }}
           >

tailwind.config.ts

@@ -12,6 +12,23 @@ const config: Config = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      keyframes: {
+        scaling: {
+          '0%': {
+            transition: 'all 1s ease',
+            minHeight: '31.8vw',
+            minWidth: '31.6vw',
+          },
+          '100%': {
+            transition: 'all 1s ease',
+            minHeight: '43.2vw',
+            minWidth: '48vw',
+          },
+        },
+      },
+      animation: {
+        scaling: 'scaling 1s ease-in-out both',
+      },
     },
   },
   plugins: [],