From d97908f185d4dead14cdeef519101cac4e635279 Mon Sep 17 00:00:00 2001 From: EdwardNew Date: Tue, 5 Nov 2024 04:32:54 -0800 Subject: [PATCH 1/2] feat: updated all assets and scalings again --- public/images/page-assets/badge.svg | 38 +-- public/images/page-assets/cards.svg | 81 ++---- public/images/page-assets/companies.svg | 207 +++++++++------- public/images/page-assets/feather.svg | 8 +- public/images/page-assets/main-content.svg | 276 ++++----------------- public/images/page-assets/orgs.svg | 120 ++++----- public/images/page-assets/polaroid.svg | 22 +- src/app/Home.scss | 26 +- src/app/page.tsx | 50 ++-- 9 files changed, 309 insertions(+), 519 deletions(-) diff --git a/public/images/page-assets/badge.svg b/public/images/page-assets/badge.svg index 4b81370..426c145 100644 --- a/public/images/page-assets/badge.svg +++ b/public/images/page-assets/badge.svg @@ -1,28 +1,28 @@ - + - + - - + + - + - - - - - - - + + + + + + + - - - - + + + + @@ -33,12 +33,12 @@ - + - + - + diff --git a/public/images/page-assets/cards.svg b/public/images/page-assets/cards.svg index 2b76656..50a6914 100644 --- a/public/images/page-assets/cards.svg +++ b/public/images/page-assets/cards.svg @@ -1,67 +1,16 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/public/images/page-assets/companies.svg b/public/images/page-assets/companies.svg index 52f3257..198add9 100644 --- a/public/images/page-assets/companies.svg +++ b/public/images/page-assets/companies.svg @@ -1,89 +1,120 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/page-assets/feather.svg b/public/images/page-assets/feather.svg index 738d7f4..a149b9f 100644 --- a/public/images/page-assets/feather.svg +++ b/public/images/page-assets/feather.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/public/images/page-assets/main-content.svg b/public/images/page-assets/main-content.svg index 31f8235..b107f33 100644 --- a/public/images/page-assets/main-content.svg +++ b/public/images/page-assets/main-content.svg @@ -1,234 +1,44 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/page-assets/orgs.svg b/public/images/page-assets/orgs.svg index 4452a60..f34ac6a 100644 --- a/public/images/page-assets/orgs.svg +++ b/public/images/page-assets/orgs.svg @@ -1,65 +1,65 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + diff --git a/public/images/page-assets/polaroid.svg b/public/images/page-assets/polaroid.svg index e960ebf..a355fdb 100644 --- a/public/images/page-assets/polaroid.svg +++ b/public/images/page-assets/polaroid.svg @@ -1,16 +1,16 @@ - - - - - - - - + + + + + + + + - + - - + + diff --git a/src/app/Home.scss b/src/app/Home.scss index 17ceea5..fe3e170 100644 --- a/src/app/Home.scss +++ b/src/app/Home.scss @@ -84,23 +84,23 @@ } #feather, #folder-feather { - height: calc(var(--folder-height) * 0.424); + height: calc(var(--folder-height) * 0.43); } #main-content, #folder-main-content { - height: calc(var(--folder-height) * 0.373); + height: calc(var(--folder-height) * 0.43); } #polaroid, #folder-polaroid { - height: calc(var(--folder-height) * 0.349); + height: calc(var(--folder-height) * 0.351); } #orgs, #folder-orgs { - height: calc(var(--folder-height) * 0.565); + height: calc(var(--folder-height) * 0.45); } #companies, #folder-companies { - height: calc(var(--folder-height) * 0.402); + height: calc(var(--folder-height) * 0.48); } #magnifying-glass, #folder-magnifying-glass { @@ -108,7 +108,7 @@ } #cards, #folder-cards { - height: calc(var(--folder-height) * 0.353); + height: calc(var(--folder-height) * 0.36); } // TODO: DELETE LATER @@ -258,23 +258,23 @@ } #badge { - width: calc(var(--folder-width) * 0.258); + width: calc(var(--folder-width) * 0.311); transform: translate(65%, -125%) rotate(12deg); } #feather { - width: calc(var(--folder-width) * 0.354); + width: calc(var(--folder-width) * 0.269); transform: translate(-40%, -200%) rotate(-22.5deg); } #main-content { - width: calc(var(--folder-width) * 0.54); + width: calc(var(--folder-width) * 0.572); transform: translate(-58%, -60%) rotate(-5deg); } #polaroid { - width: calc(var(--folder-width) * 0.176); + width: calc(var(--folder-width) * 0.234); transform: translate(-90%, -200%) rotate(-21deg); } #orgs { - width: calc(var(--folder-width) * 0.344); + width: calc(var(--folder-width) * 0.326); transform: translate(20%, -140%) rotate(-46deg); } #companies { @@ -282,11 +282,11 @@ transform: translate(35%, -70%) rotate(29deg); } #magnifying-glass { - width: calc(var(--folder-width) * 0.408); + width: calc(var(--folder-width) * 0.297); transform: translate(-130%, -75%); } #cards { - width: calc(var(--folder-width) * 0.35); + width: calc(var(--folder-width) * 0.36); transform: translate(-110%, -140%) rotate(8deg); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 72baa3c..6b4b8a3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -220,7 +220,7 @@ export default function Page() { tl.to( '#companies', { - top: '28%', + top: '23%', right: '3%', rotate: -30, scale: 1.67, @@ -324,8 +324,8 @@ export default function Page() { className="page-asset" src="/images/page-assets/cards.svg" alt="" - width={287} - height={223} + width={271} + height={192} /> Date: Tue, 5 Nov 2024 21:00:04 -0800 Subject: [PATCH 2/2] feat: finished mobile animation for ~580 breakpoint --- src/app/Home.scss | 97 ++++------- src/app/page.tsx | 432 ++++++++++++++++++++++++++++++++-------------- 2 files changed, 336 insertions(+), 193 deletions(-) diff --git a/src/app/Home.scss b/src/app/Home.scss index fe3e170..c5c4bfc 100644 --- a/src/app/Home.scss +++ b/src/app/Home.scss @@ -7,6 +7,18 @@ --folder-height: 50vh; } +#page-container { + background-color: black; + // display: grid; + justify-content: center; + justify-items: center; + align-content: center; + gap: 3rem; + height: 100%; + overflow-x: hidden; + position: relative; +} + #folder { position: relative; width: calc(var(--folder-height) * 1.411); @@ -68,7 +80,6 @@ position: absolute; display: none; width: auto; - // outline: 2px solid red; z-index: 1; } @@ -111,46 +122,6 @@ height: calc(var(--folder-height) * 0.36); } -// TODO: DELETE LATER -// #badge { -// bottom: 15%; -// right: -3%; -// transform: rotate(-11deg); -// } -// #feather { -// top: 0; -// right: 40%; -// transform: rotate(10deg); -// } -// #main-content { -// bottom: 30%; -// right: 50%; -// transform: translateX(50%); -// } -// #polaroid { -// top: 0; -// right: 55%; -// } -// #orgs { -// bottom: 5%; -// left: 1%; -// transform: rotate(42deg); -// } -// #companies { -// top: 28%; -// right: 3%; -// transform: rotate(-30deg); -// } -// #magnifying-glass { -// left: 0%; -// bottom: 25%; -// transform: rotate(54deg); -// } -// #cards { -// top: 32%; -// left: 8%; -// } - /* folder asset positions */ #folder-badge { top: 15%; @@ -221,7 +192,7 @@ left: 30%; } -/* Styles for landscape screens (aspect ratio greater than 1) */ +/* Styles for vertical screens (aspect ratio less than 1) */ @media (max-aspect-ratio: 1/1) { #folder { height: calc(var(--folder-width) * 0.708); @@ -238,6 +209,7 @@ #folder, #folder-back, #folder-bottom, + #page-folder-bottom, #folder-flap { width: var(--folder-width); } @@ -246,6 +218,10 @@ height: calc(var(--folder-width) * 0.24); } + #folder > .folder-asset { + height: auto; + } + #badge, #feather, #main-content, @@ -253,41 +229,42 @@ #orgs, #companies, #magnifying-glass, - #cards { + #cards, + #page-folder-bottom { height: auto; } - #badge { + #badge, + #folder-badge { width: calc(var(--folder-width) * 0.311); - transform: translate(65%, -125%) rotate(12deg); } - #feather { + #feather, + #folder-feather { width: calc(var(--folder-width) * 0.269); - transform: translate(-40%, -200%) rotate(-22.5deg); } - #main-content { + #main-content, + #folder-main-content { width: calc(var(--folder-width) * 0.572); - transform: translate(-58%, -60%) rotate(-5deg); } - #polaroid { + #polaroid, + #folder-polaroid { width: calc(var(--folder-width) * 0.234); - transform: translate(-90%, -200%) rotate(-21deg); } - #orgs { + #orgs, + #folder-orgs { width: calc(var(--folder-width) * 0.326); - transform: translate(20%, -140%) rotate(-46deg); } - #companies { - width: calc(var(--folder-width) * 0.351); - transform: translate(35%, -70%) rotate(29deg); + #companies, + #folder-companies { + width: calc(var(--folder-width) * 0.352); } - #magnifying-glass { + #magnifying-glass, + #folder-magnifying-glass { width: calc(var(--folder-width) * 0.297); - transform: translate(-130%, -75%); } - #cards { + #cards, + #folder-cards { width: calc(var(--folder-width) * 0.36); - transform: translate(-110%, -140%) rotate(8deg); } #paper-border-top-left { diff --git a/src/app/page.tsx b/src/app/page.tsx index 6b4b8a3..c237059 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -33,18 +33,6 @@ export default function Page() { const folderCards = useRef(null); const folderBottom = useRef(null); - // const setPageAssetPosition = ( - // pageAssetRef: RefObject, - // folderAssetRef: RefObject - // ): void => { - // const folderAssetRect = folderAssetRef.current?.getBoundingClientRect(); - // const pageAsset = pageAssetRef.current; - // if (folderAssetRect && pageAsset) { - // pageAsset.style.top = `${folderAssetRect.top}px`; - // pageAsset.style.left = `${folderAssetRect.left}px`; - // } - // }; - useEffect(() => { const setNonFolderPositions = () => { const folderBadgeRect = folderBadge.current?.getBoundingClientRect(); @@ -63,7 +51,7 @@ export default function Page() { if (folderBadgeRect && badge.current) { badge.current.style.position = 'absolute'; - badge.current.style.bottom = `calc(100vh - ${folderBadgeRect.bottom}px)`; + badge.current.style.top = `${folderBadgeRect.top}px`; badge.current.style.right = `calc(100vw - ${folderBadgeRect.right}px)`; } if (folderFeatherRect && feather.current) { @@ -73,7 +61,7 @@ export default function Page() { } if (folderMainContentRect && mainContent.current) { mainContent.current.style.position = 'absolute'; - mainContent.current.style.bottom = `calc(100vh - ${folderMainContentRect.bottom}px)`; + mainContent.current.style.top = `${folderMainContentRect.top}px`; mainContent.current.style.right = `calc(100vw - ${folderMainContentRect.right}px)`; } if (folderPolaroidRect && polaroid.current) { @@ -83,7 +71,7 @@ export default function Page() { } if (folderOrgsRect && orgs.current) { orgs.current.style.position = 'absolute'; - orgs.current.style.bottom = `calc(100vh - ${folderOrgsRect.bottom}px)`; + orgs.current.style.top = `${folderOrgsRect.top}px`; orgs.current.style.left = `${folderOrgsRect.left}px`; } if (folderCompaniesRect && companies.current) { @@ -93,7 +81,7 @@ export default function Page() { } if (folderMagnifyingGlassRect && magnifyingGlass.current) { magnifyingGlass.current.style.position = 'absolute'; - magnifyingGlass.current.style.bottom = `calc(100vh - ${folderMagnifyingGlassRect.bottom}px)`; + magnifyingGlass.current.style.top = `${folderMagnifyingGlassRect.top}px`; magnifyingGlass.current.style.left = `${folderMagnifyingGlassRect.left}px`; } if (folderCardsRect && cards.current) { @@ -115,7 +103,158 @@ export default function Page() { // return () => window.removeEventListener('resize', setNonFolderPositions); }, []); - const openFolder = () => { + const [matches, setMatches] = useState( + window.matchMedia('(min-width: 1100px)').matches + ); + + useEffect(() => { + window + .matchMedia('(min-width: 1100px)') + .addEventListener('change', e => setMatches(e.matches)); + }, []); + + const openFolderMobile = () => { + setFolderOpenned(true); + const tl = gsap.timeline(); + const pageElementSpreadDuration = 1; + const pageElementSpreadEase = Power2.easeIn; + const assetScale = 2.5; + /* folder openning animation and swaping folder elements for page elements */ + tl.to('#folder-flap', { + rotateX: 160, + duration: 0.5, + ease: Power2.easeInOut + }).add(() => { + gsap.set('.folder-asset', { display: 'none' }); + gsap.set('#click-to-open-text', { visibility: 'hidden' }); + gsap.set('.page-asset', { display: 'block' }); + }); + /* page elements rise up out of folder */ + tl.to('.page-asset:not(#page-folder-bottom)', { + translateY: '-5vh', + duration: 1, + ease: Power1.easeInOut + }); + tl.to('#page-container', { + height: '400vw', + duration: 1.5 + }); + tl.to( + ['#folder', '#page-folder-bottom'], + { + y: '450vw', + translateX: -50, + rotate: 10, + duration: 2, + ease: Power3.easeInOut + }, + '<' // folder drop animation starts at same time as elements rise starts + ); + tl.to( + '.page-asset:not(#page-folder-bottom)', + { + translateY: '0', // revert "up" added to page elements by prev animation + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<0.5' // page elements all animate 0.5s after folder drop animation starts + ); + tl.to( + '#main-content', + { + top: '50vw', + right: '20%', + scale: 2, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + tl.to( + '#magnifying-glass', + { + top: '115vw', + left: '5%', + rotate: 54, + scale: assetScale, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<+=0.5' + ); + tl.to( + '#cards', + { + top: '110vw', + left: '30%', + scale: assetScale, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + tl.to( + '#companies', + { + top: '175vw', + right: '20%', + rotate: -30, + scale: 2.6, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + tl.to( + '#feather', + { + top: '240vw', + left: '40%', + rotate: 10, + scale: 2.6, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + tl.to( + '#polaroid', + { + top: '240vw', + left: '5%', + scale: 2.7, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + tl.to( + '#badge', + { + top: '280vw', + right: '5%', + rotate: -11, + scale: 2.8, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + tl.to( + '#orgs', + { + top: '340vw', + left: '10%', + rotate: 42, + scale: assetScale, + duration: pageElementSpreadDuration, + ease: pageElementSpreadEase + }, + '<' + ); + }; + + const openFolderDesktop = () => { setFolderOpenned(true); const tl = gsap.timeline(); const pageElementSpreadDuration = 1; @@ -161,7 +300,7 @@ export default function Page() { tl.to( '#badge', { - bottom: '15%', + top: '60%', right: '-3%', rotate: -11, scale: 1.67, @@ -185,7 +324,7 @@ export default function Page() { tl.to( '#main-content', { - bottom: '30%', + top: '52%', right: '50%', translateX: '50%', scale: 1.67, @@ -208,7 +347,7 @@ export default function Page() { tl.to( '#orgs', { - bottom: '5%', + top: '70%', left: '1%', rotate: 42, scale: 1.67, @@ -232,8 +371,8 @@ export default function Page() { tl.to( '#magnifying-glass', { + top: '31%', left: '0%', - bottom: '25%', rotate: 54, scale: 1.67, duration: pageElementSpreadDuration, @@ -274,19 +413,21 @@ export default function Page() { ); return ( -
+
+
+ {/* page animation assets */}
setIsHoveringFolder(true)} - onMouseLeave={() => setIsHoveringFolder(false)} - onClick={openFolder} - role="button" - tabIndex={0} - onFocus={() => setIsHoveringFolder(true)} - onBlur={() => setIsHoveringFolder(false)} - onKeyDown={e => { - if (e.key === 'Enter' || e.key === ' ') { - openFolder(); - } + style={{ + position: 'absolute', + top: 0, + left: '50%', + transform: 'translateX(-50%)', + display: 'grid', + height: '100vh', + alignContent: 'center', + alignSelf: 'start', + gap: '3rem' }} > - +
setIsHoveringFolder(true)} + onMouseLeave={() => setIsHoveringFolder(false)} + onClick={() => { + if (matches) { + openFolderDesktop(); + } else { + openFolderMobile(); + } + }} + role="button" + tabIndex={0} + onFocus={() => setIsHoveringFolder(true)} + onBlur={() => setIsHoveringFolder(false)} + onKeyDown={e => { + if (e.key === 'Enter' || e.key === ' ') { + if (matches) { + openFolderDesktop(); + } else { + openFolderMobile(); + } + } + }} + > + - - - - - - - - + + + + + + + + - -
-
+ +
+
+
+

Click/Tap To Open

-

Click/Tap To Open

);