diff --git a/app/globals.css b/app/globals.css index 1b297740..3042543f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -27,10 +27,22 @@ body { #iframe-overlay { z-index: 1; - background-color: transparent; + 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/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 + + + 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/ContactUs/contactus.module.scss b/components/ContactUs/contactus.module.scss index 3245e40c..a18d517d 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; } } @@ -529,7 +527,10 @@ margin-top: 1.5rem; margin-bottom: 0rem; height: 70lvh; - overflow-y: hidden; + + .scrollWrapper { + pointer-events: none; + } } // .cardContainer { @@ -584,10 +585,8 @@ // } // } -@media(max-width: 450px) { - +@media (max-width: 450px) { .contactPage { - .heading { margin-top: 1rem; } @@ -595,19 +594,20 @@ .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/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 ( <>
- +
- +
- +
diff --git a/components/Landing/Landing/Landing.tsx b/components/Landing/Landing/Landing.tsx index 97bc1e63..15aefc28 100644 --- a/components/Landing/Landing/Landing.tsx +++ b/components/Landing/Landing/Landing.tsx @@ -224,47 +224,136 @@ export default function Landing() { // }, []); useGSAP(() => { - let timelineConfig; - if (isLoaded) { - 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(slotMachine.current.position, { - y: -2.25, // Start from below the screen - duration: 1.5, - ease: "sine.inOut", - }) - .to("#mainwrapper", { - autoAlpha: 1, - duration: 1, - ease: "sine.inOut", - }) - .to("#oasisLogo", { - autoAlpha: 1, - duration: 0.5, - ease: "sine.inOut", - }); + if (isLoaded && camera) { + 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]); + }, [isLoaded, camera]); useGSAP( () => { @@ -482,6 +571,7 @@ export default function Landing() { { yPercent: -110, duration: 2, + pointerEvents: "auto", }, "-=0.5" ); @@ -718,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++) { @@ -727,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, }); @@ -783,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++) { @@ -792,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, }); diff --git a/components/Preloader/preloader.module.scss b/components/Preloader/preloader.module.scss index 80dbee17..672f061f 100644 --- a/components/Preloader/preloader.module.scss +++ b/components/Preloader/preloader.module.scss @@ -8,4 +8,11 @@ color: white; position: fixed; z-index: 9999999; + + @media (width > 1000px) { + img{ + height: 125%; + } + } + }