feat: animations for clusters carousel

delta · Dec 5, 2023 · 726ab2a · 726ab2a
1 parent f8b9f71
commit 726ab2a
Showing 1 changed file with 47 additions and 4 deletions.
diff --git a/src/components/ClusterCarousel/ClusterCarousel.tsx b/src/components/ClusterCarousel/ClusterCarousel.tsx
@@ -14,6 +14,7 @@ import temp from '../../assets/images/temp.png';
 
 import leftArrow from '../../assets/images/leftArrow.png';
 import rightArrow from '../../assets/images/rightArrow.png';
+import { useState } from 'react';
 
 const ClusterCarousel = () => {
     const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -36,10 +37,45 @@ const ClusterCarousel = () => {
         },
     };
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [swiper, setSwiper] = useState<any>(null);
+
+    const handleSlideChange = (index: number) => {
+        const currentSlide = swiper?.slides[index];
+        if (currentSlide) {
+            currentSlide.style.transform = 'scale(1.1)';
+            currentSlide.style.opacity = '1';
+            currentSlide.style.transition = 'transform 0.5s ease-in-out';
+        }
+
+        const previousSlide = swiper?.slides[index - 1];
+        if (previousSlide) {
+            previousSlide.style.transform = 'scale(0.67)';
+            previousSlide.style.opacity = '0.4';
+            previousSlide.style.transition = 'transform 0.5s ease-in-out';
+        }
+
+        const nextSlide = swiper?.slides[index + 1];
+        if (nextSlide) {
+            nextSlide.style.transform = 'scale(0.67)';
+            nextSlide.style.opacity = '0.4';
+            nextSlide.style.transition = 'transform 0.5s ease-in-out';
+        }
+    };
+
+    const goToNextSlide = () => {
+        swiper?.slideNext();
+    };
+
+    const goToPreviousSlide = () => {
+        swiper?.slidePrev();
+    };
+
     return (
         <div className="relative w-full md:w-3/4 h-full flex items-center justify-center max-2xl:px-10">
             <Image src={leftPortal} className="absolute max-lg:hidden left-0 w-80" alt="<" />
             <Swiper
+                onSwiper={setSwiper}
                 modules={[Autoplay, Pagination, Navigation]}
                 spaceBetween={0}
                 slidesPerView={1}
@@ -51,19 +87,20 @@ const ClusterCarousel = () => {
                 pagination={{ enabled: false }}
                 breakpoints={breakpoints}
                 className="w-full lg:w-[66%] xl:w-3/4 h-full flex items-center justify-center z-10"
+                onSlideChange={swiper => handleSlideChange(swiper?.activeIndex)}
             >
                 {slides.map(slide => (
                     <SwiperSlide
                         key={slide}
-                        className={`flex justify-center items-center bg-transparent max-sm:rounded-xl`}
+                        className={`flex justify-center items-center bg-transparent rounded-lg`}
                     >
                         <div className="w-full h-full lg:w-3/4 2xl:w-4/5 m-auto flex justify-center items-center">
                             <Image
                                 src={temp}
                                 width={450}
                                 objectPosition="center"
                                 objectFit="contain"
-                                className={'max-sm:rounded-xl'}
+                                className={'rounded-lg'}
                                 alt="cluster"
                             />
                         </div>
@@ -72,13 +109,19 @@ const ClusterCarousel = () => {
             </Swiper>
             <Image src={rightPortal} className="absolute w-80 max-lg:hidden right-0" alt="<" />
             <div className="fixed bottom-[12vh] left-1/2 -translate-x-1/2 flex justify-center lg:justify-between items-center md:px-10 px-5">
-                <div className="absolute -left-10 w-10">
+                <div
+                    className="absolute -left-10 w-10 hover:scale-110 animate-pulse"
+                    onClick={goToPreviousSlide}
+                >
                     <Image src={leftArrow} alt="<" />
                 </div>
                 <div className="font-Orbitron text-sm md:text-2xl border-white border px-10 md:px-16 py-2 rounded-full">
                     BATMAN
                 </div>
-                <div className="absolute -right-10 w-10">
+                <div
+                    className="absolute -right-10 w-10 hover:scale-110 animate-pulse"
+                    onClick={goToNextSlide}
+                >
                     <Image src={rightArrow} alt=">" />
                 </div>
             </div>