Merge pull request #33 from TEDx-SJEC/stacking-cards

Stacking cards

src/app/page.tsx

@@ -5,30 +5,24 @@ import HorizontalScroll from "@/components/common/HorizontalScrollCarousel";
 import TextReveal from "@/components/ui/text-reveal";
 import HeroVideoDialog from "@/components/ui/hero-video-dialog";
 import ParallaxFooter from "@/components/common/Footer";
-// import Lenis from 'lenis'
+import StackedCards from "@/components/stacking-cards/stacked";
 
 export default function Home() {
-  // const lenis = new Lenis()
-
-  // lenis.on('scroll', (e) => {
-  //   console.log(e)
-  // })
-
-  // function raf(time: number) {
-  //   lenis.raf(time)
-  //   requestAnimationFrame(raf)
-  // }
-
-  // requestAnimationFrame(raf)
   return (
     <>
       <div className="z-20 relative bg-black overflow-x-clip">
         <div className="flex flex-col items-center justify-center h-screen p-4"></div>
-        <div className="z-10 flex min-h-64 items-center justify-center rounded-lg ">
+
+        <div className="z-10 flex min-h-64 items-center justify-center rounded-lg "> 
           <TextReveal text="TEDxSJEC is a platform that brings together curious, creative, and progressive thinkers from St. Joseph Engineering College." />
         </div>
+
+        <div>
+          <StackedCards />
+        </div>
+
         <div className="relative h-screen md:p-32 p-8 py-24 backdrop-invert flex flex-col justify-center items-center">
-          <h1 className="text-black text-center md:text-5xl text-2xl w-full font-bold leading-tight">
+          <h1 className="text-black text-center md:text-5xl text-2xl w-full font-bold leading-tight mt-10">
             Check out the <br /> Previous Editions
           </h1>
           <div className="mt-24 md:w-2/3 w-full">
@@ -41,11 +35,14 @@ export default function Home() {
             />
           </div>
         </div>
+
         <div className="backdrop-invert mb-[100vh]">
           <HorizontalScroll />
         </div>
+
       </div>
 
+
       <ParallaxFooter />
     </>
   );

src/components/stacking-cards/performers.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": 1,
+    "title": "Performer 1",
+    "description": " ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!",
+    "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100"
+  },
+  {
+    "id": 2,
+    "title": "Performer 2",
+    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!",
+    "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100"
+  },
+  {
+    "id": 3,
+    "title": "Performer 3",
+    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!",
+    "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100"
+  },
+  {
+    "id": 4,
+    "title": "Performer 4",
+    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dicta error nam eaque. Eum fuga laborum quos expedita iste saepe similique, unde possimus quia at magnam sed cupiditate? Reprehenderit, harum!",
+    "imgSrc": "https://images.unsplash.com/photo-1620207418302-439b387441b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=100"
+  }
+]

src/components/stacking-cards/stacked.css

@@ -0,0 +1,98 @@
+.sticky-section {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.cards__item {
+  position: sticky;
+  top: 0;
+}
+
+.cards_el {
+  will-change: transform;
+  background: white;
+  border-radius: 14px;
+  display: flex;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%);
+  transform-origin: center top;
+}
+
+.cards {
+  padding: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-rows: repeat(4, var(--card-height));
+  gap: 40px 0;
+}
+
+.card__image-container {
+  display: flex;
+  width: 40%;
+  flex-shrink: 0;
+}
+
+.card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  aspect-ratio: 1;
+}
+
+.card__content {
+  padding: 40px 30px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card__title {
+  padding: 0;
+  margin: 0;
+  font-size: 60px;
+  font-weight: 600;
+  color: #16263a;
+}
+
+.card__description {
+  line-height: 1.4;
+  font-size: 24px;
+  color: #16263a;
+}
+
+.space {
+  height: 90vh;
+  font-size: 24px;
+}
+
+.space--small {
+  height: 40vh;
+}
+
+@media (max-width: 600px) {
+  .cards_el {
+    flex-direction: column;
+  }
+
+  .card__image-container {
+    width: 100%;
+  }
+
+  .card__image {
+    aspect-ratio: 16 / 9;
+  }
+
+  .card__title {
+    font-size: 32px;
+  }
+
+  .card__description {
+    font-size: 16px;
+  }
+
+  .card__content {
+    padding: 30px 20px;
+  }
+}

src/components/stacking-cards/stacked.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useEffect, useRef } from "react";
+import "@/components/stacking-cards/stacked.css";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import Lenis from "lenis";
+import performersData from "@/components/stacking-cards/performers.json";
+
+export default function StackedCards() {
+  const cardsRef = useRef<HTMLDivElement[]>([]);
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    const lenis = new Lenis();
+    lenis.on("scroll", ScrollTrigger.update);
+
+    gsap.ticker.add((time) => {
+      lenis.raf(time * 1000);
+    });
+
+    gsap.ticker.lagSmoothing(0);
+
+    const cardsWrapper = gsap.utils.toArray<HTMLDivElement>(".cards__item");
+    const cardsEl = gsap.utils.toArray<HTMLDivElement>(".cards_el");
+
+    cardsWrapper.forEach((e, i) => {
+      const card = cardsEl[i] as HTMLDivElement;
+      let scale = 1,
+        rotate = 0;
+
+      if (i !== cardsEl.length - 1) {
+        scale = 0.9 + 0.025 * i;
+        rotate = -10;
+      }
+      // console.log(`Card Index: ${i}, Scale: ${scale}, Rotate: ${rotate}`);
+
+      gsap.to(card, {
+        scale: scale,
+        rotationX: rotate,
+        transformOrigin: "top center",
+        ease: "none",
+        scrollTrigger: {
+          trigger: e,
+          start: "top " + (50 + 30 * i),
+          end: "bottom +=650px",
+          endTrigger: ".end-animation",
+          pin: e,
+          pinSpacing: false,
+          scrub: true,
+        },
+      });
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+  return (
+    <div className="sticky-section">
+      <div className="cards">
+        {performersData.map((card, index) => (
+          <div
+            className="cards__item"
+            data-index={index}
+            key={card.id}
+            ref={(el) => {
+              if (el) cardsRef.current[index] = el;
+            }}
+          >
+            <div className="cards_el">
+              <div className="card__image-container">
+                <img
+                  className="card__image"
+                  src={card.imgSrc}
+                  alt={`Card Image ${index + 1}`}
+                />
+              </div>
+              <div className="card__content">
+                <h1 className="card__title">{card.title}</h1>
+                <p className="card__description">{card.description}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="space"></div>
+      <div className="end-animation"></div>
+    </div>
+  );
+}