diff --git a/package-lock.json b/package-lock.json index 4bc3401..38f824c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9594,10 +9594,9 @@ } }, "node_modules/next-auth": { - "version": "4.24.7", - "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.7.tgz", - "integrity": "sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==", - "license": "ISC", + "version": "4.24.8", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.8.tgz", + "integrity": "sha512-SLt3+8UCtklsotnz2p+nB4aN3IHNmpsQFAZ24VLxGotWGzSxkBh192zxNhm/J5wgkcrDWVp0bwqvW0HksK/Lcw==", "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", @@ -9610,12 +9609,16 @@ "uuid": "^8.3.2" }, "peerDependencies": { + "@auth/core": "0.34.2", "next": "^12.2.5 || ^13 || ^14", "nodemailer": "^6.6.5", "react": "^17.0.2 || ^18", "react-dom": "^17.0.2 || ^18" }, "peerDependenciesMeta": { + "@auth/core": { + "optional": true + }, "nodemailer": { "optional": true } diff --git a/src/app/page.tsx b/src/app/page.tsx index 072333f..5a2ebba 100644 --- a/src/app/page.tsx +++ b/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 ( <>
-
+ +
+ +
+ +
+
-

+

Check out the
Previous Editions

@@ -41,11 +35,14 @@ export default function Home() { />
+
+
+ ); diff --git a/src/components/stacking-cards/performers.json b/src/components/stacking-cards/performers.json new file mode 100644 index 0000000..b262fda --- /dev/null +++ b/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" + } +] diff --git a/src/components/stacking-cards/stacked.css b/src/components/stacking-cards/stacked.css new file mode 100644 index 0000000..eb069b6 --- /dev/null +++ b/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; + } +} diff --git a/src/components/stacking-cards/stacked.tsx b/src/components/stacking-cards/stacked.tsx new file mode 100644 index 0000000..fa493a4 --- /dev/null +++ b/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([]); + 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(".cards__item"); + const cardsEl = gsap.utils.toArray(".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 ( +
+
+ {performersData.map((card, index) => ( +
{ + if (el) cardsRef.current[index] = el; + }} + > +
+
+ {`Card +
+
+

{card.title}

+

{card.description}

+
+
+
+ ))} +
+
+
+
+ ); +}