+
diff --git a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
index 8903907..6178b5d 100644
--- a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
+++ b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
@@ -22,32 +22,30 @@ export const DesktopInteractionSlide = forwardRef<
useEffect(() => {
if (active) videoRef.current?.play();
- else {
- videoRef.current?.pause();
- videoRef.current!.currentTime = 0;
- }
+ else videoRef.current?.pause();
}, [active]);
return (
setAnimationing(true)}
onAnimationComplete={() => setAnimationing(false)}
onClick={onClick}
- initial={
- active
- ? { aspectRatio: 1, width: '15.3125vw' }
- : { aspectRatio: 'auto', width: 'auto' }
- }
animate={
!active
- ? { aspectRatio: 1, width: '15.3125vw' }
- : { aspectRatio: 817 / 600, width: '51.0652vw' }
+ ? { width: '15.3125vw', aspectRatio: 1 }
+ : { width: '51.0652vw', aspectRatio: 817 / 600 }
+ }
+ exit={
+ active
+ ? { width: '15.3125vw', aspectRatio: 1 }
+ : { width: '51.0652vw', aspectRatio: 817 / 600 }
}
transition={{
- duration: 0.5,
+ duration: 1,
}}
className={
- 'bg-[#14161F] first:border-l last:border-r flex flex-col transition-all border-[#3D425C] ' +
+ 'bg-[#14161F] first:border-l last:border-r flex flex-col transition-all border-[#3D425C] h-fit ' +
(bordered ? 'border' : 'border-y') +
(active ? ' p-8 justify-between' : ' content-center justify-center')
}
@@ -57,7 +55,7 @@ export const DesktopInteractionSlide = forwardRef<
{title}
diff --git a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
index bccf2e4..af64a7d 100644
--- a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
+++ b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
import { interactions } from '../../../consts/interactions';
import { SliderControls } from '../../ui/SliderControls';
import { DesktopInteractionSlide } from './DesktopInteractionsSlide';
+import { AnimatePresence } from 'framer-motion';
export function DesktopInteractionsSlider() {
const [current, setCurrent] = useState(0);
@@ -28,18 +29,20 @@ export function DesktopInteractionsSlider() {
onRightClick={() => goToSlide('next')}
className="flex justify-end"
/>
-
- {interactions.map(({ video, title }, index) => (
-
goToSlide(index)}
- bordered={index === current || Math.abs(index - current) === 2}
- ref={index === current ? currentSlideRef : null}
- />
- ))}
+
+
+ {interactions.map(({ video, title }, index) => (
+ goToSlide(index)}
+ bordered={index === current || Math.abs(index - current) === 2}
+ ref={index === current ? currentSlideRef : null}
+ />
+ ))}
+
>
);
diff --git a/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx b/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx
index 670ef50..bce500a 100644
--- a/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx
+++ b/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx
@@ -13,7 +13,6 @@ export const InteractionSlide = forwardRef<
videoRef.current?.play();
} else {
videoRef.current?.pause();
- videoRef.current!.currentTime = 0;
}
}, [active, video]);