From 7ff023cf0b5cfb07223eac9da280c4bda4565594 Mon Sep 17 00:00:00 2001 From: Aritra Konar Date: Tue, 27 May 2025 07:24:35 +0000 Subject: [PATCH] feat: update gallery with infinite scroll and hover start from hovered image --- app/Gallery/page.tsx | 130 ++++++++++++++++++++++++++--------- public/Assets/Images/08.jpg | Bin 0 -> 2091392 bytes public/Assets/Images/cj1.jpg | Bin 0 -> 185260 bytes public/Assets/Images/cj2.jpg | Bin 0 -> 122317 bytes public/Assets/Images/cj3.jpg | Bin 0 -> 212938 bytes public/Assets/Images/cj4.jpg | Bin 0 -> 112467 bytes public/Assets/Images/cj5.jpg | Bin 0 -> 125319 bytes public/Assets/Images/cj6.jpg | Bin 0 -> 157103 bytes public/Assets/Images/cj7.jpg | Bin 0 -> 174812 bytes public/Assets/Images/cj8.jpg | Bin 0 -> 207679 bytes public/Assets/Images/cj9.jpg | Bin 0 -> 1706752 bytes 11 files changed, 98 insertions(+), 32 deletions(-) create mode 100644 public/Assets/Images/08.jpg create mode 100644 public/Assets/Images/cj1.jpg create mode 100644 public/Assets/Images/cj2.jpg create mode 100644 public/Assets/Images/cj3.jpg create mode 100644 public/Assets/Images/cj4.jpg create mode 100644 public/Assets/Images/cj5.jpg create mode 100644 public/Assets/Images/cj6.jpg create mode 100644 public/Assets/Images/cj7.jpg create mode 100644 public/Assets/Images/cj8.jpg create mode 100644 public/Assets/Images/cj9.jpg diff --git a/app/Gallery/page.tsx b/app/Gallery/page.tsx index cf8114b..31aead6 100644 --- a/app/Gallery/page.tsx +++ b/app/Gallery/page.tsx @@ -1,16 +1,69 @@ "use client"; -import React from "react"; +import React, { useState, useEffect } from "react"; import Image from "next/image"; -import { motion } from "framer-motion"; +import { motion, useAnimation } from "framer-motion"; import NavBar from "../NavBar/page"; import Footer from "../Footer/page"; +const images = [ + "/Assets/Images/gallery_image.jpg", + "/Assets/Images/cj9.jpg", + "/Assets/Images/08.jpg", + "/Assets/Images/cj1.jpg", + "/Assets/Images/cj2.jpg", + "/Assets/Images/cj3.jpg", + "/Assets/Images/cj4.jpg", + "/Assets/Images/cj5.jpg", + "/Assets/Images/cj6.jpg", + "/Assets/Images/cj7.jpg", + "/Assets/Images/cj8.jpg", +]; + +const IMAGE_WIDTH = 600 + 48; // width + 2*mx-6 (24px each side) + const Gallery = () => { + const controls = useAnimation(); + const [isPaused, setIsPaused] = useState(false); + const [offset, setOffset] = useState(0); // offset in px + const [hoveredIdx, setHoveredIdx] = useState(null); + + // Start animation + useEffect(() => { + if (!isPaused) { + controls.start({ + x: [offset, offset - (images.length * IMAGE_WIDTH)], + transition: { + repeat: Infinity, + repeatType: "loop", + duration: 25, + ease: "linear", + }, + }); + } else { + controls.stop(); + } + // eslint-disable-next-line + }, [isPaused, offset, controls]); + + // When hover, set offset so hovered image is first + const handleMouseEnter = (idx: number) => { + setIsPaused(true); + setHoveredIdx(idx); + setOffset(-idx * IMAGE_WIDTH); + controls.set({ x: -idx * IMAGE_WIDTH }); + }; + + // On leave, resume animation from current offset + const handleMouseLeave = () => { + setIsPaused(false); + setHoveredIdx(null); + }; + return (
- +
{
- -
- Gallery Image - -
-

Capturing our journey of innovation and collaboration

-
-
-
-
- +
+ + {[...images, ...images].map((src, idx) => ( + handleMouseEnter(idx % images.length)} + onMouseLeave={handleMouseLeave} + > + {`Gallery +
+

+ Capturing our journey of innovation and collaboration +

+
+
+ ))} +
+
+
+ +