pointless interactivity

mikndotdev · Jul 26, 2024 · 5c8f485 · 5c8f485
1 parent 8683184
commit 5c8f485
Showing 1 changed file with 79 additions and 49 deletions.
diff --git a/app/ui/SpinningGallery.tsx b/app/ui/SpinningGallery.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { motion } from "framer-motion";
+import { motion, useInView, type Variants } from "framer-motion";
 import Image from "next/image";
 
 interface SpinningGalleryProps {
@@ -14,24 +14,22 @@ const SpinningGallery: React.FC<SpinningGalleryProps> = ({
     images,
 }) => {
     const filteredImages = images.slice(0, images.length);
+    const ref = React.useRef(null);
+    const isInView = useInView(ref, { once: true });
+
+    const containerVariants: Variants = {
+        hidden: { scale: 0 },
+        visible: { scale: 1, transition: { duration: 0.5 } },
+    };
 
     return (
         <div className="relative w-full h-full flex justify-center items-center bg-transparent">
-            <Image
-                src={centerImage}
-                alt="Center Image"
-                width={150}
-                height={150}
-                className="rounded-full"
-            />
             <motion.div
+                ref={ref}
                 className="circle absolute"
-                animate={{ rotate: 360 }}
-                transition={{
-                    repeat: Infinity,
-                    duration: duration,
-                    ease: "linear",
-                }}
+                variants={containerVariants}
+                initial="hidden"
+                animate={isInView ? "visible" : "hidden"}
                 style={{
                     width: "300px",
                     height: "300px",
@@ -41,45 +39,77 @@ const SpinningGallery: React.FC<SpinningGalleryProps> = ({
                     position: "absolute",
                 }}
             >
-                {filteredImages.map((img, index) => {
-                    const angle = index * (360 / filteredImages.length);
-                    const transform = `rotate(${angle}deg) translate(200px) rotate(-${angle}deg)`;
+                <motion.div
+                    className="rotating-container"
+                    animate={{ rotate: 360 }}
+                    transition={{
+                        repeat: Infinity,
+                        duration: duration,
+                        ease: "linear",
+                    }}
+                    style={{
+                        width: "100%",
+                        height: "100%",
+                        position: "absolute",
+                    }}
+                >
+                    {filteredImages.map((img, index) => {
+                        const angle = index * (360 / filteredImages.length);
+                        const transform = `rotate(${angle}deg) translate(200px) rotate(-${angle}deg)`;
 
-                    return (
-                        <div
-                            key={index}
-                            className="absolute"
-                            style={{
-                                transform,
-                                position: "absolute",
-                                width: "80px",
-                                height: "80px",
-                                borderRadius: "50%",
-                                top: "calc(50% - 40px)",
-                                left: "calc(50% - 40px)",
-                                transformOrigin: "50% 50%",
-                            }}
-                        >
-                            <motion.div
-                                animate={{ rotate: -360 }}
-                                transition={{
-                                    repeat: Infinity,
-                                    duration: duration,
-                                    ease: "linear",
+                        return (
+                            <div
+                                key={index}
+                                className="absolute"
+                                style={{
+                                    transform,
+                                    position: "absolute",
+                                    width: "80px",
+                                    height: "80px",
+                                    borderRadius: "50%",
+                                    top: "calc(50% - 40px)",
+                                    left: "calc(50% - 40px)",
+                                    transformOrigin: "50% 50%",
                                 }}
                             >
-                                <Image
-                                    src={img}
-                                    alt={`Image ${index + 1}`}
-                                    width={80}
-                                    height={80}
-                                    className=""
-                                />
-                            </motion.div>
-                        </div>
-                    );
-                })}
+                                <motion.div
+                                    whileHover={{ scale: 1.2, rotate: 10 }}
+                                    whileTap={{
+                                        scale: 0.8,
+                                        borderRadius: "100%",
+                                    }}
+                                >
+                                    <motion.div
+                                        animate={{ rotate: -360 }}
+                                        transition={{
+                                            repeat: Infinity,
+                                            duration: duration,
+                                            ease: "linear",
+                                        }}
+                                    >
+                                        <Image
+                                            src={img}
+                                            alt={`Image ${index + 1}`}
+                                            width={80}
+                                            height={80}
+                                            className=""
+                                        />
+                                    </motion.div>
+                                </motion.div>
+                            </div>
+                        );
+                    })}
+                </motion.div>
             </motion.div>
+            <div className="relative z-10">
+                <Image
+                    src={centerImage}
+                    alt="Center Image"
+                    width={150}
+                    height={150}
+                    className="rounded-full"
+                />
+            </div>
         </div>
     );
 };