Merge pull request #17 from Musab-Hassan/dev

Reworked mobile nav-bar aniamtions
Musab-Hassan · Aug 26, 2022 · 1ed1be0 · 1ed1be0
2 parents 541dde0 + 9e885c9
commit 1ed1be0
Showing 1 changed file with 31 additions and 16 deletions.
diff --git a/src/components/nav.svelte b/src/components/nav.svelte
@@ -6,6 +6,7 @@ export let scrollContainer;
 import anime from "animejs";
 import { onMount } from "svelte";
 import { homeAnchor, workAnchor, aboutAnchor, loadPagePromise } from "../store";
+import { maskSlideIn, maskSlideOut } from "../animations";
 
 let logoElem, githubElem;
 let homeWrapperElem, workWrapperElem, aboutWrapperElem, mobileMenuElem;
@@ -19,7 +20,18 @@ onMount(async () => {
 	introAnimations();
 });
 
-
+$: mobileTransitionSwitcher = 
+	mobileActive ? 
+	maskSlideIn : 
+	(node, _) => { 
+		let out = maskSlideIn(node, {reverse: true}); 
+		return { 
+			tick: t => {
+				let reversedT = 1 - t;
+				out.tick(reversedT);
+			} 
+		}
+	};
 
 
 function navigate(anchor) {
@@ -34,16 +46,16 @@ function introAnimations() {
 	let targets = [logoElem, mobileMenuElem, homeWrapperElem, workWrapperElem, aboutWrapperElem, githubElem];
 	// Set initial state to begin animation from
 	targets.forEach(e => {
-		e.style.transform = "translateY(125%) rotate(10deg)"
+		e.style.transform = "translateY(130%) rotate(-7deg)"
 	})
 
 	anime({
 		targets: targets,
 		rotate: 0,
 		translateY: "0%",
 		easing: "cubicBezier(0.165, 0.84, 0.44, 1)",
-		duration: 1500,
-		delay: anime.stagger(50, {start: + 500})
+		duration: 1000,
+		delay: anime.stagger(100, {start: + 500})
 	});
 }
 
@@ -67,22 +79,24 @@ function introAnimations() {
 		<!-- Mobile and desktop nav menu -->
 		<div class="wrapper" class:mobileActive>
 			<ul class="nav-list">
+				{#key mobileActive}
 				<li bind:this={homeWrapperElem}>
-					<div on:click={() => navigate($homeAnchor)}>Home</div>
+					<div on:click={() => navigate($homeAnchor)} in:mobileTransitionSwitcher={{ delay: 200 }}>Home</div>
 				</li>
 				<li bind:this={workWrapperElem}>
-					<div on:click={() => navigate($workAnchor)}>Work</div>
+					<div on:click={() => navigate($workAnchor)} in:mobileTransitionSwitcher={{ delay: 250 }}>Work</div>
 				</li>
 				<li bind:this={aboutWrapperElem}>
-					<div on:click={() => navigate($aboutAnchor)}>About</div>
+					<div on:click={() => navigate($aboutAnchor)} in:mobileTransitionSwitcher={{ delay: 300 }}>About</div>
 				</li>
 				<li class="mobile">
-					<a href="mailto:musabhassan04@gmail.com" target="_blank">Email</a>
+					<a href="mailto:musabhassan04@gmail.com" target="_blank" in:mobileTransitionSwitcher={{ delay: 350 }}>Email</a>
 				</li>
 				<li bind:this={githubElem}>
-					<a href="https://github.com/Musab-Hassan" target="_blank">Github</a>
+					<a href="https://github.com/Musab-Hassan" target="_blank" in:mobileTransitionSwitcher={{ delay: 400 }}>Github</a>
 				</li>
-
+				{/key}
+			</ul>
 		</div>
 
 		<!-- Mobile hambuger menu -->
@@ -166,14 +180,14 @@ function introAnimations() {
 	@media only screen and (max-width: 950px)
 		.wrapper
 			position: fixed
-			top: -10vh
-			left: 0
+			top: -10.1vh
+			right: 0
 			height: 100vh
 			width: 0vw
 			background-color: #131314
-			transition: 1s cubic-bezier(0.86, 0, 0.07, 1) width
-			-webkit-transition: 1s cubic-bezier(0.86, 0, 0.07, 1) width
-			-moz-transition: 1s cubic-bezier(0.86, 0, 0.07, 1) width
+			transition: 0.9s cubic-bezier(.58, .14, .06, .97) width
+			-webkit-transition: 0.9s cubic-bezier(.58, .14, .06, .97) width
+			-moz-transition: 0.9s cubic-bezier(.58, .14, .06, .97) width
 			overflow: hidden !important
 
 			ul.nav-list
@@ -190,14 +204,15 @@ function introAnimations() {
 				overflow: hidden !important
 
 			&.mobileActive
+				left: 0
 				width: 100vw
 
 			li
 				font-family: $font
 				font-weight: bolder
 				text-transform: lowercase
 				font-size: 9vw
-				display: inline-block
+				display: inline-flex
 				box-sizing: border-box
 				padding: 2vh 0