sequence slider

src/components/complexPage/ComplexTopPanel.tsx

@@ -45,7 +45,7 @@ const ComplexTopPanel = () => {
     <div
       className={`absolute ${
         isFullMode ? "" : "top-[62px]"
-      } left-0 z-20 w-full p-4 grid grid-cols-12`}
+      } left-0 z-50 w-full p-4 grid grid-cols-12`}
     >
       <div className="flex gap-2 col-span-3">
         <Button

src/components/complexPage/SequenceSlider.tsx

@@ -41,6 +41,7 @@ import { Transition } from "react-transition-group";
 //   ];
 
 const arrayLength = 360;
+const keyframes: number[] = [51, 178, 249, 339];
 
 interface SequenceSliderProps {
   path: string;
@@ -48,11 +49,12 @@ interface SequenceSliderProps {
 
 function SequenceSlider({ path }: SequenceSliderProps) {
   const [selectedImageRightIndex, setSelectedRightImageIndex] =
-    useState<number>(0);
-  const [selectedImageLeftIndex, setSelectedImageLeftIndex] =
-    useState<number>(0);
+    useState<number>(keyframes[0]);
+  const [selectedImageLeftIndex, setSelectedImageLeftIndex] = useState<number>(
+    arrayLength - keyframes[0]
+  );
   const [isAnimate, setIsAnimate] = useState<boolean>(false);
-  const keyframes: number[] = [0, 60, 120, 180, 240, 300];
+
   const [keyframeIndex, setKeyframeIndex] = useState<number>(0);
   const handlers = useSwipeable({
     trackMouse: true,
@@ -66,18 +68,18 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     setLoadedImages((prev) => prev + 1);
   }
 
-  function animateToRight() {
+  function animateToRight(currentOffset: number) {
     const obj = { selectedImageIndex: selectedImageRightIndex };
 
     gsap.to(obj, {
-      selectedImageIndex: selectedImageRightIndex + 60,
+      selectedImageIndex: selectedImageRightIndex + currentOffset,
       duration: 0.75,
       ease: "power1.inOut",
       onUpdate: () => {
         const roundedIndex = Math.round(obj.selectedImageIndex);
-        if (roundedIndex === arrayLength) {
-          setSelectedRightImageIndex(0);
-          setSelectedImageLeftIndex(0);
+        if (roundedIndex >= arrayLength) {
+          setSelectedRightImageIndex(roundedIndex - arrayLength);
+          setSelectedImageLeftIndex(arrayLength - (roundedIndex - arrayLength));
         } else {
           setSelectedRightImageIndex(roundedIndex);
           setSelectedImageLeftIndex(arrayLength - roundedIndex);
@@ -89,18 +91,20 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     });
   }
 
-  function animateToLeft() {
+  function animateToLeft(currentOffset: number) {
     const obj = { selectedImageIndex: selectedImageLeftIndex };
 
     gsap.to(obj, {
-      selectedImageIndex: selectedImageLeftIndex + 60,
+      selectedImageIndex: selectedImageLeftIndex + currentOffset,
       duration: 0.75,
       ease: "power1.inOut",
       onUpdate: () => {
         const roundedIndex = Math.round(obj.selectedImageIndex);
-        if (roundedIndex === arrayLength || roundedIndex === 0) {
-          setSelectedRightImageIndex(0);
-          setSelectedImageLeftIndex(0);
+        if (roundedIndex > arrayLength) {
+          setSelectedRightImageIndex(
+            arrayLength - (roundedIndex - arrayLength)
+          );
+          setSelectedImageLeftIndex(roundedIndex - arrayLength);
         } else {
           setSelectedImageLeftIndex(roundedIndex);
           setSelectedRightImageIndex(arrayLength - roundedIndex);
@@ -113,20 +117,32 @@ function SequenceSlider({ path }: SequenceSliderProps) {
   }
 
   function next() {
+    const updatedKeyframeIndex =
+      keyframeIndex !== keyframes.length - 1 ? keyframeIndex + 1 : 0;
+    const currentOffset =
+      keyframeIndex !== keyframes.length - 1
+        ? keyframes[updatedKeyframeIndex] - keyframes[keyframeIndex]
+        : 360 - keyframes[keyframeIndex] + keyframes[0];
+
+    setKeyframeIndex(updatedKeyframeIndex);
+
     setIsAnimate(true);
-    animateToRight();
+    animateToRight(currentOffset);
   }
 
   function prev() {
-    setIsAnimate(true);
-    animateToLeft();
-  }
+    const updatedKeyframeIndex =
+      keyframeIndex !== 0 ? keyframeIndex - 1 : keyframes.length - 1;
+    const currentOffset =
+      keyframeIndex !== 0
+        ? keyframes[keyframeIndex] - keyframes[updatedKeyframeIndex]
+        : 360 - keyframes[updatedKeyframeIndex] + keyframes[keyframeIndex];
 
-  useEffect(() => {
-    if (keyframes.includes(selectedImageRightIndex)) {
-      console.log(setKeyframeIndex(keyframes.indexOf(selectedImageRightIndex)));
-    }
-  }, [selectedImageRightIndex]);
+    setKeyframeIndex(updatedKeyframeIndex);
+
+    setIsAnimate(true);
+    animateToLeft(currentOffset);
+  }
 
   const [width, setWidth] = useState<number>();
   const [top, setTop] = useState<number>();
@@ -142,10 +158,16 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  useEffect(() => {
+    console.log("selectedRightIn", selectedImageRightIndex);
+
+    return () => {};
+  }, []);
+
   return (
     <div
       {...handlers}
-      className="scene absolute w-full h-full overflow-hidden bg-black"
+      className="absolute w-full h-full overflow-hidden bg-black top-0 left-0"
     >
       <div
         className="absolute left-0"

src/pages/Complex.tsx

@@ -7,7 +7,7 @@ const Complex = () => {
     <div className="overflow-hidden h-screen w-screen">
       <ComplexTopPanel />
       <div className="bg-blue-500 h-full w-full"></div>
-      {/* <SequenceSlider path={""} /> */}
+      <SequenceSlider path={"/images/sequence"} />
       <ButtomPanel />
     </div>
   );