Added comments

Author: codebucks27

src/components/ImageList.jsx

@@ -16,6 +16,7 @@ const ImageList = () => {
       <button
         href="#last-image"
         onClick={() => lenis.scrollTo("#last-image", { lerp: 0.01 })}
+        // lenis is the object returned from useLenis, and it has a method called scrollTo() that takes two arguments, the first is the id of the element you want to scroll to, and the second is the options object, here we set the lerp to 0.01 to make the scroll slower
         className="bg-white text-black capitalize p-4 font-semibold text-xl mt-16 hover:bg-white/90"
       >
         scroll to anchor

src/components/Parallax.jsx

@@ -5,32 +5,36 @@ import { useWindowSize } from "@studio-freight/hamo";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 
 export function Parallax({ className, children, speed = 1, id = "parallax" }) {
-  const trigger = useRef();
-  const target = useRef();
-  const timeline = useRef();
+  const trigger = useRef(); // this is the element that will trigger the animation
+  const target = useRef();  // this is the element that will be animated
+  const timeline = useRef(); // this is the timeline of the animation that will be created by gsap 
   const { width: windowWidth } = useWindowSize();
 
   useEffect(() => {
     gsap.registerPlugin(ScrollTrigger);
     const y = windowWidth * speed * 0.1;
+    //  here the y is the distance the element will move in px when the trigger is at the top of the viewport and the element is at the bottom of the viewport
+
 
     const setY = gsap.quickSetter(target.current, "y", "px");
+    // here we create a function that will set the y position of the element, The gsap.quickSetter() method is a handy way to create a function that will set a specific property on a specific object. In this case, we want to set the y property of the target element in pixels.
 
     timeline.current = gsap.timeline({
       scrollTrigger: {
         id: id,
-        trigger: trigger.current,
-        scrub: true,
-        start: "top bottom",
-        end: "bottom top",
+        trigger: trigger.current, // this is the element that will trigger the animation
+        scrub: true, // this will make the animation smooth and not jumpy when scrolling up and down the page
+        start: "top bottom", // this means the animation will start when the top of the trigger element reaches the bottom of the viewport 
+        end: "bottom top", // this means the animation will end when the bottom of the trigger element reaches the top of the viewport
         onUpdate: (e) => {
           setY(e.progress * y);
         },
+        // markers: true,
       },
     });
 
     return () => {
-      timeline?.current?.kill();
+      timeline?.current?.kill(); // this will kill the animation when the component unmounts
     };
   }, [id, speed, windowWidth]);
 

src/components/SmoothScrolling.jsx

@@ -6,7 +6,7 @@ function SmoothScrolling({ children }) {
     <ReactLenis
       root
       options={{ lerp: 0.0001, duration: 1.5, smoothTouch: true }}
-      direction={-1}
+      // here the lerp is the speed of the scroll
     >
       {children}
     </ReactLenis>