- FIXED PAGE TRANSITIONS!!! see sveltejs/kit#7405 (comment)

- cleanup + webgl planes correctly removed, removed hacks
goodfortunecollective · Oct 10, 2023 · a180149 · a180149
1 parent a9a9341
commit a180149
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 65 deletions.
diff --git a/src/app.css b/src/app.css
@@ -58,4 +58,4 @@
 		margin-top: -8px;
 		padding: 8px 0;
 	}
-}
+}
diff --git a/src/lib/components/ProjectListHover.svelte b/src/lib/components/ProjectListHover.svelte
@@ -29,12 +29,12 @@
 				style="--color: #dbd5bf;"
 			>
 				<span
-					in:slide|global={{
+					in:slide|local={{
 						duration: 500,
 						direction: 'bottom',
 						easing: cubicOut
 					}}
-					out:slide|global={{ duration: 500, direction: 'top', easing: cubicOut }}
+					out:slide|local={{ duration: 500, direction: 'top', easing: cubicOut }}
 					class="block absolute w-full"
 				>
 					{title}

diff --git a/src/lib/components/ProjectListItem.svelte b/src/lib/components/ProjectListItem.svelte
@@ -11,7 +11,6 @@
 	export let content: any;
 	export let isMainItem: boolean;
 	export let layout: 'left' | 'right' = 'left';
-	export let useCurtainsPlanes: boolean = true;
 
 	function onEnter() {
 		project_list_hover.set(name);
@@ -73,7 +72,7 @@
 		window.addEventListener('smoothScrollUpdate', onScroll);
 
 		return () => {
-			resizeObserver.unobserve(document.body)
+			resizeObserver.disconnect()
 			// this function is called when the component is destroyed
 			window.removeEventListener('smoothScrollUpdate', onScroll);
 		};
@@ -97,20 +96,7 @@
 			on:mouseenter={onEnter}
 			on:mouseleave={onLeave}
 		>
-			{#if useCurtainsPlanes}
-				<ScrollPlane {slug} {content} {name} />
-			{:else}
-				<div class="ProjectListItem-thumb-image">
-					<img
-						src={content.thumbnail
-						? content.thumbnail.filename.replace('//a-us.storyblok.com', '//a2-us.storyblok.com')
-						: 'https://source.unsplash.com/random/?Motion&1'}
-						crossorigin=""
-						data-sampler="planeTexture"
-						alt={name}
-					/>
-				</div>
-			{/if}
+			<ScrollPlane {slug} {content} {name} />
 		</div>
 
 		<div class="ProjectListItem-infos">

diff --git a/src/lib/components/ScrollPlane.svelte b/src/lib/components/ScrollPlane.svelte
@@ -100,18 +100,30 @@
 			opacity: {
 				name: 'uOpacity',
 				type: '1f',
-				value: 1
+				value: 0
 			}
 		}
 	};
 
 	const createPlane = () => {
 		if (curtains && canCreatePlane && planeEl) {
-			console.log('create plane', name, planeEl)
 			params.renderOrder = curtains.planes.length;
 
 			plane = new Plane(curtains, planeEl, params);
 
+			const inTransition = {
+				opacity: plane.uniforms.opacity.value,
+			}
+
+			gsap.to(inTransition, {
+				opacity: 1,
+				duration: 0.5,
+				ease: 'power2.inOut',
+				onUpdate: () => {
+					plane.uniforms.opacity.value = inTransition.opacity
+				}
+			})
+
 			plane.onRender(() => {
 				const scroll = ScrollSmoother.get();
 				const velocity = clamp(scroll.getVelocity() * 0.01, -60, 60);
@@ -133,34 +145,27 @@
 		}
 	});
 
-	// isPageHidden.subscribe((value: boolean) => {
-	// 	isHidden = value;
-	// 	if (value && isTransition && !canCreatePlane) {
-	// 		// coming from a page transition
-	// 		// wait a couple ticks for old planes to be removed first
-	// 		canCreatePlane = true;
-	// 		createPlane();
-	// 		setTimeout(() => {
-	// 			createPlane();
-	// 		}, 32);
-	// 	}
-	// });
-
+	let resizeObserver: ResizeObserver | null;
 
 	useCurtains(
 		(curtainsInstance) => {
 			curtains = curtainsInstance;
 			createPlane();
+
+			resizeObserver = new ResizeObserver(() => {
+				if(plane) plane.resize()
+			})
+
+			resizeObserver.observe(document.body)
 		},
 		(curtainsInstance) => {
-			// TODO not triggered after using work page filters!!
-			// https://github.com/sveltejs/svelte/issues/5268 ?
 			if (plane) {
-				console.log('plane removed', plane.index, name);
+				//console.log('plane removed', plane.index, name);
 				plane.remove();
 				plane = null;
-				curtainsInstance.resize();
 			}
+
+			resizeObserver?.disconnect()
 		}
 	);
 

diff --git a/src/lib/storyblok/Header.svelte b/src/lib/storyblok/Header.svelte
@@ -94,8 +94,8 @@
 			<!-- Background backdrop, show/hide based on slide-over state. -->
 			<div class="fixed inset-0 z-20" />
 			<div
-				in:fade|global
-				out:fade|global={{ delay: 500 }}
+				in:fade|local
+				out:fade|local={{ delay: 500 }}
 				class="fixed inset-y-0 right-0 z-20 w-full px-6 py-6 overflow-y-auto bg-black sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
 			>
 				<div class="flow-root mt-24">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -117,7 +117,7 @@
 	<div id="smooth-wrapper" class="z-10">
 		<div id="smooth-content" bind:this={smoothScrollContentEl}>
 			<PageTransition pathname={data.pathname}>
-				<slot />
+				<slot key={data.pathname} />
 				{#if data.settings}
 					<StoryblokComponent blok={getComponentByName(data.settings.content, 'footer')} />
 				{/if}

diff --git a/src/routes/PageTransition.svelte b/src/routes/PageTransition.svelte
@@ -22,12 +22,12 @@
 
 {#key pathname}
 	<div
-		in:fade|global={{
+		in:fade|local={{
 			easing: cubicOut,
 			duration: pageEnterDuration * 0.5,
 			delay: pageLeaveDuration + pageTransitionPauseDuration + pageEnterDuration * 0.5
 		}}
-		out:fade|global={{ easing: quartOut, duration: 100, delay: pageLeaveDuration * 0.5 - 100 }}
+		out:fade|local={{ easing: quartOut, duration: 100, delay: pageLeaveDuration * 0.5 - 100 }}
 		on:outrostart={onPageChange}
 		on:outroend={onOldContentRemoved}
 	>

diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte
@@ -24,7 +24,8 @@
 
 	let containerEl: HTMLElement;
 
-	$: filter = $page.url.searchParams.get('filter');
+	//$: filter = $page.url.searchParams.get('filter');
+	$: filter = $page.url.hash.slice(1);
 
 	/**
 	 * @param {any} projects
@@ -82,15 +83,6 @@
 		}
 	};
 
-	// force removing all projects planes when navigating away
-	// works even if we have used the filters
-	$: useCurtainsPlanes = true as boolean;
-	$: if ($navigating) {
-		if (curtains && $navigating?.from?.route.id === '/work' && filter !== '') {
-			useCurtainsPlanes = false;
-		}
-	}
-
 	onMount(() => {
 		if (data.story) {
 			useStoryblokBridge(data.story.id, (newStory) => (data.story = newStory));
@@ -118,13 +110,6 @@
 		}
 	);
 
-	// update planes sizes and positions
-	/**
-	async function hashchange() {
-		await tick();
-		if (curtains) curtains.resize();
-	}
-	*/
 </script>
 
 <section class="pt-20 3xl:pt-24 pb-32">
@@ -134,15 +119,15 @@
 				<MenuItem
 					name="All Projects"
 					sup={data.projects.length}
-					url={`${base}/work`}
+					url={`${base}/work#all`}
 					selected={!filter || filter === 'all'}
 				/>
 				{#each categories as category, i}
 					{#if category.count > 0}
 						<MenuItem
 							name={category.name}
 							sup={category.count}
-							url={`${base}/work?filter=${category.value}`}
+							url={`${base}/work#${category.value}`}
 							delay={i * 50}
 							selected={filter === category.value}
 						/>
@@ -161,7 +146,6 @@
 						{content}
 						isMainItem={index === 0}
 						layout={index % 2 === 0 ? 'left' : 'right'}
-						{useCurtainsPlanes}
 						class={getProjectGridItemClass(index)}
 					/>
 				</div>

diff --git a/src/routes/work/MenuItem.svelte b/src/routes/work/MenuItem.svelte
@@ -12,8 +12,8 @@
 </script>
 
 <li
-	in:fade|global={{ delay }}
-	out:fade|global
+	in:fade|local={{ delay }}
+	out:fade|local
 	class={cls(
 		'mb-2 text-xs font-bold tracking-wider text-right uppercase menu-item whitespace-nowrap' +
 			(selected ? ' active' : '')
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,4 +58,4 @@ @@
     		margin-top: -8px;
     		padding: 8px 0;
     	}
-    }
+    }