Timeline.jsx

src/Components/Timeline/Timeline.jsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { motion, useAnimation } from 'framer-motion';
+import React, { useEffect } from 'react';
+import { motion, useAnimation, useInView } from 'framer-motion';
+import { useRef } from 'react';
 import './Timeline.css';
 
 const timelineData = [
@@ -11,25 +12,44 @@ const timelineData = [
 
 const TimelineItem = ({ event, index, activeIndex }) => {
   const ref = useRef(null);
+  const isInView = useInView(ref, { once: false, margin: "-100px" });
   const controls = useAnimation();
 
   useEffect(() => {
-    if (index === activeIndex) {
-      controls.start({ opacity: 1, y: 0, scale: 1 });
+    if (isInView) {
+      controls.start("visible");
     } else {
-      controls.start({ opacity: 0.5, y: 50, scale: 0.9 });
+      controls.start("hidden");
     }
-  }, [activeIndex, index, controls]);
+  }, [isInView, controls]);
+
+  const variants = {
+    hidden: {
+      opacity: 0,
+      y: 100,
+      scale: 0.8,
+      transition: { duration: 0.1 }
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.1 }
+    }
+  };
 
   return (
     <motion.div
       ref={ref}
-      initial={{ opacity: 0, y: 50, scale: 0.9 }}
       animate={controls}
-      transition={{ duration: 0.5, ease: "easeOut" }}
+      initial="hidden"
+      variants={variants}
       className={`timeline-item ${index % 2 === 0 ? 'left' : 'right'}`}
+      style={{
+        opacity: activeIndex === index ? 1 : activeIndex > index ? 0.3 : 1
+      }}
     >
-      <div className={`timeline-dot ${index === activeIndex ? 'active' : ''}`}></div>
+      <div className="timeline-dot"></div>
       <div className="timeline-card">
         <div className="timeline-content">
           <span className="timeline-date">{event.date}</span>
@@ -42,60 +62,49 @@ const TimelineItem = ({ event, index, activeIndex }) => {
 };
 
 const Timeline = () => {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = React.useState(0);
   const containerRef = useRef(null);
-  const scrollTimeout = useRef(null); // Prevent frequent updates
 
   useEffect(() => {
     const handleScroll = () => {
       if (!containerRef.current) return;
 
-      if (scrollTimeout.current) {
-        clearTimeout(scrollTimeout.current);
-      }
-
-      scrollTimeout.current = setTimeout(() => {
-        requestAnimationFrame(() => {
-          const items = containerRef.current.querySelectorAll('.timeline-item');
-          const viewportMiddle = window.innerHeight / 2;
-          let newIndex = 0;
+      const items = containerRef.current.querySelectorAll('.timeline-item');
+      const containerTop = containerRef.current.offsetTop;
+      const scrollPosition = window.scrollY + window.innerHeight / 2;
 
-          items.forEach((item, index) => {
-            const rect = item.getBoundingClientRect();
-            const itemMiddle = rect.top + rect.height / 2;
-            if (itemMiddle < viewportMiddle) {
-              newIndex = index;
-            }
-          });
-
-          // Prevent unnecessary updates
-          if (newIndex !== activeIndex) {
-            setActiveIndex(newIndex);
-          }
-        });
-      }, 100); // Smooth delay
+      items.forEach((item, index) => {
+        const itemTop = item.offsetTop + containerTop;
+        if (scrollPosition > itemTop) {
+          setActiveIndex(index);
+        }
+      });
     };
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      clearTimeout(scrollTimeout.current);
-    };
-  }, [activeIndex]);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   return (
     <div className="timeline-wrapper">
-      <h2 className="timeline-heading">Timeline</h2>
+      <h2 className="timeline-heading">Timeline</h2> {/* Added heading */}
       <div ref={containerRef} className="timeline-container">
         <div className="timeline-line-container">
-          <motion.div
+          <motion.div 
             className="timeline-line"
-            animate={{ scaleY: (activeIndex + 1) / timelineData.length }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
+            style={{
+              scaleY: activeIndex / (timelineData.length - .8)
+            }}
           />
         </div>
+
         {timelineData.map((event, index) => (
-          <TimelineItem key={index} event={event} index={index} activeIndex={activeIndex} />
+          <TimelineItem 
+            key={index}
+            event={event}
+            index={index}
+            activeIndex={activeIndex}
+          />
         ))}
       </div>
     </div>