From 3c1eb290bfae1aba420b5c8842f59a7fe1bb9101 Mon Sep 17 00:00:00 2001 From: Manas Date: Fri, 13 Sep 2024 00:28:24 +0530 Subject: [PATCH 01/10] fix: mobile scroll in contact --- components/ContactUs/contactus.module.scss | 4 +++- components/Landing/Landing/Landing.tsx | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/components/ContactUs/contactus.module.scss b/components/ContactUs/contactus.module.scss index 3245e40c..06a768fc 100644 --- a/components/ContactUs/contactus.module.scss +++ b/components/ContactUs/contactus.module.scss @@ -510,6 +510,7 @@ @media (max-width: 600px) { .contactPage { height: fit-content; + overflow-y: hidden; .heading { margin-top: 2rem; @@ -529,7 +530,8 @@ margin-top: 1.5rem; margin-bottom: 0rem; height: 70lvh; - overflow-y: hidden; + overflow-y: scroll; + pointer-events: none; } // .cardContainer { diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 97bc1e63..4deca959 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -480,8 +480,9 @@ export default function Landing() { .to( "#contact-us-inner-scroll", { - yPercent: -110, - duration: 2, + yPercent: -0, + duration: 10, + pointerEvents: "auto", }, "-=0.5" ); From df8cf3fbfd9d9e5c0a98dda76465e1cc63e52605 Mon Sep 17 00:00:00 2001 From: Manas Date: Fri, 13 Sep 2024 01:18:12 +0530 Subject: [PATCH 02/10] fix: scroll issue --- components/ContactUs/contactus.module.scss | 31 ++++++++++------------ components/Landing/Landing/Landing.tsx | 4 +-- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/components/ContactUs/contactus.module.scss b/components/ContactUs/contactus.module.scss index 06a768fc..06cf6da4 100644 --- a/components/ContactUs/contactus.module.scss +++ b/components/ContactUs/contactus.module.scss @@ -291,9 +291,7 @@ } @media (max-width: 2100px) and (min-width: 1700px) { - .bottom { - .bottomAnimation { width: 300px; height: 280px; @@ -395,7 +393,7 @@ } } - .cardContainer, + .cardContainer, .cardContainer1 { opacity: 0; margin-top: 0; @@ -405,8 +403,8 @@ .mobileContainer { margin-top: 3rem; display: block; - - .scrollWrapper{ + + .scrollWrapper { width: 100%; height: 100%; display: flex; @@ -488,7 +486,7 @@ } .bottom { - display: none + display: none; } } @@ -530,7 +528,6 @@ margin-top: 1.5rem; margin-bottom: 0rem; height: 70lvh; - overflow-y: scroll; pointer-events: none; } @@ -586,10 +583,8 @@ // } // } -@media(max-width: 450px) { - +@media (max-width: 450px) { .contactPage { - .heading { margin-top: 1rem; } @@ -597,19 +592,21 @@ .mobileContainer { margin-top: 1rem; margin-bottom: 0rem; - gap: 1rem; + + .scrollWrapper { + gap: 1rem; + } } } } -@media(max-width: 400px) { - +@media (max-width: 400px) { .contactPage { - .mobileContainer { - gap: 0.8rem 0.9rem; + + .scrollWrapper { + gap: 0.8rem 0.9rem; + } } } } - - diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 4deca959..4f8c3605 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -480,8 +480,8 @@ export default function Landing() { .to( "#contact-us-inner-scroll", { - yPercent: -0, - duration: 10, + yPercent: -110, + duration: 1, pointerEvents: "auto", }, "-=0.5" From db1204a5c720d7425848e0049cfcc924d1d2b831 Mon Sep 17 00:00:00 2001 From: Manas Date: Fri, 13 Sep 2024 01:56:51 +0530 Subject: [PATCH 03/10] fix: pointer buttons --- components/ContactUs/contactus.module.scss | 7 ++++--- components/Landing/Landing/Landing.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/ContactUs/contactus.module.scss b/components/ContactUs/contactus.module.scss index 06cf6da4..a18d517d 100644 --- a/components/ContactUs/contactus.module.scss +++ b/components/ContactUs/contactus.module.scss @@ -508,7 +508,6 @@ @media (max-width: 600px) { .contactPage { height: fit-content; - overflow-y: hidden; .heading { margin-top: 2rem; @@ -528,7 +527,10 @@ margin-top: 1.5rem; margin-bottom: 0rem; height: 70lvh; - pointer-events: none; + + .scrollWrapper { + pointer-events: none; + } } // .cardContainer { @@ -603,7 +605,6 @@ @media (max-width: 400px) { .contactPage { .mobileContainer { - .scrollWrapper { gap: 0.8rem 0.9rem; } diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 4f8c3605..853965ba 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -481,7 +481,7 @@ export default function Landing() { "#contact-us-inner-scroll", { yPercent: -110, - duration: 1, + duration: 2, pointerEvents: "auto", }, "-=0.5" From ed3e25544774c3f5be471130c1b8b6f11f814a78 Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Fri, 13 Sep 2024 04:17:39 +0530 Subject: [PATCH 04/10] feat: slot machine entry animation --- app/globals.css | 7 +++- components/Landing/Landing/Landing.tsx | 44 ++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/app/globals.css b/app/globals.css index 1b297740..704ce12e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -27,7 +27,12 @@ body { #iframe-overlay { z-index: 1; - background-color: transparent; + opacity: 1; + background: url('/Videos/preloaderCoinVideo.gif'); + background-color: black; + background-size: contain; + background-repeat: no-repeat; + background-position: center; cursor: pointer; } diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 97bc1e63..005c8faf 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -225,7 +225,7 @@ export default function Landing() { useGSAP(() => { let timelineConfig; - if (isLoaded) { + if (isLoaded && camera) { timelineConfig = gsap.timeline(); timelineConfig .set("#mainwrapper", { autoAlpha: 0 }) // Set initial state @@ -248,11 +248,33 @@ export default function Landing() { }, 0 ) - .from(slotMachine.current.position, { - y: -2.25, // Start from below the screen - duration: 1.5, - ease: "sine.inOut", - }) + .from( + camera.position, + { + z: 2.65, + duration: 4, + ease: "sine.inOut", + }, + "<" + ) + .from( + camera.rotation, + { + x: -0.2, + duration: 4, + ease: "sine.inOut", + }, + "<" + ) + // .from( + // slotMachine.current.position, + // { + // y: -0.5, // Start from below the screen + // duration: 1.25, + // ease: "power2.out", + // }, + // "<" + // ) .to("#mainwrapper", { autoAlpha: 1, duration: 1, @@ -264,7 +286,7 @@ export default function Landing() { ease: "sine.inOut", }); } - }, [isLoaded]); + }, [isLoaded, camera]); useGSAP( () => { @@ -357,6 +379,14 @@ export default function Landing() { }, "<" ) + .to( + "#iframe-overlay", + { + opacity: 0, + duration: 1, + }, + "<" + ) .to( 'img[alt="oasis logo landing"]', { From b755464a2db4e68fe83df397c304d66eb0640777 Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Fri, 13 Sep 2024 04:36:31 +0530 Subject: [PATCH 05/10] slot machine entry animation --- components/Landing/Landing/Landing.tsx | 58 +++++++++++----------- components/Preloader/preloader.module.scss | 4 ++ 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index d03df0df..4a795e76 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -251,7 +251,7 @@ export default function Landing() { .from( camera.position, { - z: 2.65, + z: 2.48, duration: 4, ease: "sine.inOut", }, @@ -260,31 +260,39 @@ export default function Landing() { .from( camera.rotation, { - x: -0.2, + x: -0.3, duration: 4, ease: "sine.inOut", }, "<" ) - // .from( - // slotMachine.current.position, - // { - // y: -0.5, // Start from below the screen - // duration: 1.25, - // ease: "power2.out", - // }, - // "<" - // ) - .to("#mainwrapper", { - autoAlpha: 1, - duration: 1, - ease: "sine.inOut", - }) - .to("#oasisLogo", { - autoAlpha: 1, - duration: 0.5, - ease: "sine.inOut", - }); + .to( + "#mainwrapper", + { + autoAlpha: 1, + duration: 1, + ease: "sine.inOut", + }, + "-=1" + ) + .to( + "#oasisLogo", + { + autoAlpha: 1, + duration: 0.5, + ease: "sine.inOut", + }, + "-=1" + ) + .to( + "#iframe-overlay", + { + opacity: 0, + ease: "none", + duration: 0.5, + }, + "-=0.5" + ); } }, [isLoaded, camera]); @@ -379,14 +387,6 @@ export default function Landing() { }, "<" ) - .to( - "#iframe-overlay", - { - opacity: 0, - duration: 1, - }, - "<" - ) .to( 'img[alt="oasis logo landing"]', { diff --git a/components/Preloader/preloader.module.scss b/components/Preloader/preloader.module.scss index 80dbee17..f57c5efa 100644 --- a/components/Preloader/preloader.module.scss +++ b/components/Preloader/preloader.module.scss @@ -8,4 +8,8 @@ color: white; position: fixed; z-index: 9999999; + + img{ + height: 125%; + } } From 54c1648522f5c47d487d5054492f7a2cf7f906fb Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Fri, 13 Sep 2024 23:10:39 +0530 Subject: [PATCH 06/10] feat: ticket menu entry animation --- app/page.tsx | 2 +- components/Landing/Landing/Landing.tsx | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index 80e6d047..75c1247f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -13,7 +13,7 @@ import Nav from "@/components/Nav/Nav"; export default function Home() { return ( <> -
+
diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 4a795e76..e94ad57b 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -284,6 +284,15 @@ export default function Landing() { }, "-=1" ) + .from( + "#tickets-container", + { + duration: 0.5, + xPercent: 100, + ease: "sine.out", + }, + "<" + ) .to( "#iframe-overlay", { From 496180e4e1991dc2df1607bd2a9026ec2c8c948b Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Fri, 13 Sep 2024 23:20:55 +0530 Subject: [PATCH 07/10] feat: mobile responsive fix for entry animations --- app/globals.css | 19 +- components/Landing/Landing/Landing.tsx | 204 +++++++++++++-------- components/Preloader/preloader.module.scss | 7 +- 3 files changed, 145 insertions(+), 85 deletions(-) diff --git a/app/globals.css b/app/globals.css index 704ce12e..3042543f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -27,15 +27,22 @@ body { #iframe-overlay { z-index: 1; - opacity: 1; - background: url('/Videos/preloaderCoinVideo.gif'); - background-color: black; - background-size: contain; - background-repeat: no-repeat; - background-position: center; + opacity: 0; cursor: pointer; } +@media (width > 1000px) { + #iframe-overlay{ + opacity: 1; + background: url('/Videos/preloaderCoinVideo.gif'); + background-color: black; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + +} + #iframe-overlay + div { width: 1000px !important; height: 750px !important; diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index e94ad57b..92290619 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -224,84 +224,134 @@ export default function Landing() { // }, []); useGSAP(() => { - let timelineConfig; if (isLoaded && camera) { - timelineConfig = gsap.timeline(); - timelineConfig - .set("#mainwrapper", { autoAlpha: 0 }) // Set initial state - .set("#oasisLogo", { autoAlpha: 0 }) - .from( - "#leftTree", - { - x: "-100vw", - duration: 1.5, - ease: "sine.inOut", - }, - 0 - ) - .from( - "#rightTree", - { - x: "100vw", - duration: 1.5, - ease: "sine.inOut", - }, - 0 - ) - .from( - camera.position, - { - z: 2.48, - duration: 4, - ease: "sine.inOut", - }, - "<" - ) - .from( - camera.rotation, - { - x: -0.3, - duration: 4, - ease: "sine.inOut", - }, - "<" - ) - .to( - "#mainwrapper", - { - autoAlpha: 1, - duration: 1, - ease: "sine.inOut", - }, - "-=1" - ) - .to( - "#oasisLogo", - { - autoAlpha: 1, - duration: 0.5, - ease: "sine.inOut", - }, - "-=1" - ) - .from( - "#tickets-container", - { - duration: 0.5, - xPercent: 100, - ease: "sine.out", - }, - "<" - ) - .to( - "#iframe-overlay", - { - opacity: 0, - ease: "none", - duration: 0.5, - }, - "-=0.5" - ); + const timeline = gsap.timeline(); + if (window.innerWidth > 1000) { + timeline + .set("#mainwrapper", { autoAlpha: 0 }) // Set initial state + .set("#oasisLogo", { autoAlpha: 0 }) + .from( + "#leftTree", + { + x: "-100vw", + duration: 1.5, + ease: "sine.inOut", + }, + 0 + ) + .from( + "#rightTree", + { + x: "100vw", + duration: 1.5, + ease: "sine.inOut", + }, + 0 + ) + .from( + camera.position, + { + z: 2.48, + duration: 4, + ease: "sine.inOut", + }, + "<" + ) + .from( + camera.rotation, + { + x: -0.3, + duration: 4, + ease: "sine.inOut", + }, + "<" + ) + .to( + "#mainwrapper", + { + autoAlpha: 1, + duration: 1, + ease: "sine.inOut", + }, + "-=1" + ) + .to( + "#oasisLogo", + { + autoAlpha: 1, + duration: 0.5, + ease: "sine.inOut", + }, + "-=1" + ) + .from( + "#tickets-container", + { + duration: 0.5, + xPercent: 100, + ease: "sine.out", + }, + "<" + ) + .to( + "#iframe-overlay", + { + opacity: 0, + ease: "none", + duration: 0.5, + }, + "-=0.5" + ); + } else { + timeline + .set("#mainwrapper", { autoAlpha: 0 }) // Set initial state + .set("#oasisLogo", { autoAlpha: 0 }) + .from( + "#leftTree", + { + x: "-100vw", + duration: 1.5, + ease: "sine.inOut", + }, + 0 + ) + .from( + "#rightTree", + { + x: "100vw", + duration: 1.5, + ease: "sine.inOut", + }, + 0 + ) + .to( + "#mainwrapper", + { + autoAlpha: 1, + duration: 1, + ease: "sine.inOut", + }, + "-=1" + ) + .to( + "#oasisLogo", + { + autoAlpha: 1, + duration: 0.5, + ease: "sine.inOut", + }, + "-=1" + ) + .to( + "#iframe-overlay", + { + opacity: 0, + ease: "none", + duration: 0.5, + }, + "-=0.5" + ); + } } }, [isLoaded, camera]); diff --git a/components/Preloader/preloader.module.scss b/components/Preloader/preloader.module.scss index f57c5efa..672f061f 100644 --- a/components/Preloader/preloader.module.scss +++ b/components/Preloader/preloader.module.scss @@ -9,7 +9,10 @@ position: fixed; z-index: 9999999; - img{ - height: 125%; + @media (width > 1000px) { + img{ + height: 125%; + } } + } From d4e05797e3d777dae6803a34d863756366e02862 Mon Sep 17 00:00:00 2001 From: Atharv Agarwal Date: Fri, 13 Sep 2024 23:51:43 +0530 Subject: [PATCH 08/10] fix: card animation fix --- components/Landing/Card/Card.tsx | 7 ++-- components/Landing/CardsGroup/CardsGroup.tsx | 42 +++++++++++++------- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/components/Landing/Card/Card.tsx b/components/Landing/Card/Card.tsx index 99f10dba..6a2cc986 100644 --- a/components/Landing/Card/Card.tsx +++ b/components/Landing/Card/Card.tsx @@ -2,13 +2,14 @@ import React from "react"; import styles from "./card.module.scss"; interface CardProps { - cardID: string + cardID: string; + cardClass: string; } -export default function Card({ cardID }: CardProps) { +export default function Card({ cardID, cardClass }: CardProps) { return ( <> -
+
{ - for (let i = 1; i <= 2; i += 1) { - for (let j = 1; j <= 3; j += 1) { - let card = document.getElementById(`card${i}${j}`); - let check = Math.random() < 0.5 ? -1 : 1; - // console.log(card, check) - const tl = gsap.timeline({ repeat: -1 }); - tl.to(card, { duration: 1, y: check * 10 + "px" }); - tl.to(card, { duration: 1, y: "0px" }); - } - } - }); + useGSAP( + () => { + let check = Math.random() < 0.5 ? -1 : 1; + + const commonAnimations = { + y: check * 10, + duration: 1, + repeat: -1, + yoyoEase: "power2.inOut", + }; + + gsap.to(`.cardGrp1`, { + ...commonAnimations, + }); + gsap.to(`.cardGrp2`, { + ...commonAnimations, + }); + gsap.to(`.cardGrp3`, { + ...commonAnimations, + }); + }, + { dependencies: [] } + ); return ( <>
- +
- +
- +
From 04ddbf5b42f9ebd06963a73a5412c5120a9af375 Mon Sep 17 00:00:00 2001 From: Manas Date: Sat, 14 Sep 2024 15:37:26 +0530 Subject: [PATCH 09/10] feat: integrated with google console --- app/layout.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/layout.tsx b/app/layout.tsx index 4ddb9015..b68fc45d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -49,6 +49,11 @@ export default function RootLayout({ }>) { return ( + + Oasis '24 + + + From 4baec8faa83a6bfb314ac13cff1ef522d17945b2 Mon Sep 17 00:00:00 2001 From: Manas Date: Sat, 14 Sep 2024 15:40:46 +0530 Subject: [PATCH 10/10] fix: timing of card animation --- components/Landing/Landing/Landing.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 92290619..15aefc28 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -808,7 +808,7 @@ export default function Landing() { rotation: translations[i].rotation, zIndex: cardCount - i, transformOrigin: "center center", - duration: 0.2, + duration: 0.25, ease: "power1.inOut", onStart: () => { for (let j = i + 1; j < cardCount; j++) { @@ -817,7 +817,7 @@ export default function Landing() { y: translations[i].y, rotation: translations[i].rotation, transformOrigin: "center center", - duration: 0.2, + duration: 0.25, ease: "power1.inOut", zIndex: j, }); @@ -873,7 +873,7 @@ export default function Landing() { rotation: translations1[i].rotation, zIndex: cardCount1 - i, transformOrigin: "center center", - duration: 0.2, + duration: 0.25, ease: "power1.out", onStart: () => { for (let j = i + 1; j < cardCount1; j++) { @@ -882,7 +882,7 @@ export default function Landing() { y: translations1[i].y, rotation: translations1[i].rotation, transformOrigin: "center center", - duration: 0.2, + duration: 0.25, ease: "power1.out", zIndex: j, });