fixes

2024-09-17 19:19:09 +05:00
parent 401aebc66d
commit 090a866175
4 changed files with 77 additions and 45 deletions
@@ -11,31 +11,63 @@ export function Form() {
      </Title>
      <div className="relative max-lg:flex items-center gap-x-[35px]">
        <FeedbackForm />
-        <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_10s_linear_infinite]">
-          <div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 lg::w-[calc(446/1600*100vw)] origin-center">
+        <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_15s_linear_infinite]">
+          <div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center">
            <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
-              <img src="/images/form/1_1.png" alt="" />
-              <img src="/images/form/1_2.png" alt="" />
+              <img
+                src="/images/form/1_1.png"
+                alt=""
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+              />
+              <img
+                src="/images/form/1_2.png"
+                alt=""
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+              />
            </div>
            <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45">
-              <img src="/images/form/2_1.png" className="-rotate-45" alt="" />
-              <img src="/images/form/2_2.png" className="-rotate-45" alt="" />
+              <img
+                src="/images/form/2_1.png"
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                alt=""
+              />
+              <img
+                src="/images/form/2_2.png"
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                alt=""
+              />
            </div>
            <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90">
-              <img src="/images/form/3_1.png" className="-rotate-90" alt="" />
-              <img src="/images/form/3_2.png" className="-rotate-90" alt="" />
+              <div className="-rotate-45">
+                <img
+                  src="/images/form/3_1.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
+              <div className="rotate-[135deg]">
+                <img
+                  src="/images/form/3_2.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
            </div>
            <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]">
-              <img
-                src="/images/form/4_1.png"
-                className="-rotate-[135deg]"
-                alt=""
-              />
-              <img
-                src="/images/form/4_2.png"
-                className="-rotate-[135deg]"
-                alt=""
-              />
+              <div className="rotate-90">
+                <img
+                  src="/images/form/4_1.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
+              <div className="rotate-45">
+                <img
+                  src="/images/form/4_2.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
            </div>
          </div>
        </div>
@@ -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 (
    <motion.div
+      key={video}
      onAnimationStart={() => 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<
          <motion.p
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.75 }}
+            transition={{ delay: 1.25 }}
            className="font-medium text-[32px] leading-none mt-0"
          >
            {title}
@@ -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"
      />
-      <div className="flex items-end aspect-[1552/600]">
-        {interactions.map(({ video, title }, index) => (
-          <DesktopInteractionSlide
-            key={index}
-            video={video}
-            title={title}
-            active={index === current}
-            onClick={() => goToSlide(index)}
-            bordered={index === current || Math.abs(index - current) === 2}
-            ref={index === current ? currentSlideRef : null}
-          />
-        ))}
+      <div className="flex items-end h-[600px]">
+        <AnimatePresence mode="wait">
+          {interactions.map(({ video, title }, index) => (
+            <DesktopInteractionSlide
+              video={video}
+              key={index}
+              title={title}
+              active={index === current}
+              onClick={() => goToSlide(index)}
+              bordered={index === current || Math.abs(index - current) === 2}
+              ref={index === current ? currentSlideRef : null}
+            />
+          ))}
+        </AnimatePresence>
      </div>
    </>
  );
@@ -13,7 +13,6 @@ export const InteractionSlide = forwardRef<
      videoRef.current?.play();
    } else {
      videoRef.current?.pause();
-      videoRef.current!.currentTime = 0;
    }
  }, [active, video]);