Add transition to open/close carousel

src/lib/components/gallery-carousel.svelte

@@ -17,6 +17,8 @@ type GalleryImage = (ImageRecord | ImageThumbnails) & {
 export let images: Array<GalleryImage>
 export let initialIndex: number
 export let onClose: () => void
+export let send
+export let receive
 
 let carousel: HTMLElement
 
@@ -60,6 +62,8 @@ function handleEscape(event: KeyboardEvent) {
 						class="flex snap-center items-center justify-center p-2 md:p-4 xl:p-8"
 						data-index={index}
 						on:click|self|stopPropagation={onClose}
+						in:receive={{ key: index }}
+						out:send={{ key: index }}
 					>
 						<div class="group relative">
 							<ImageLens {image} lazyLoad={false} />

src/lib/components/lens-gallery.svelte

@@ -7,6 +7,8 @@ import MasonryGrid from './masonry-grid.svelte'
 export let images
 export let isHidden
 export let onOpen
+export let send
+export let receive
 </script>
 
 <MasonryGrid items={images} gapClass="gap-4 md:gap-8 xl:gap-16">
@@ -17,6 +19,8 @@ export let onOpen
 			class:opacity-30={isHidden}
 			data-index={index}
 			on:click={onOpen(index)}
+			in:receive={{ key: index }}
+			out:send={{ key: index }}
 		>
 			<ImageLens
 				image={item.thumbnails}

src/routes/photos/screen-shots/[slug]/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+import { crossfade, scale } from 'svelte/transition'
+
 import GalleryCarousel from '$lib/components/gallery-carousel.svelte'
 import LensGallery from '$lib/components/lens-gallery.svelte'
 import PageIntro from '$lib/components/page-intro.svelte'
@@ -9,12 +11,22 @@ export let data
 $: ({ title, subtitle, description, images, content } = data.json)
 $: fullTitle = subtitle ? [title, subtitle].join(' ') : title
 
-let isCarouselOpen = false
+let isCarouselOpen = null
 let initialIndex = 0
 
+const [send, receive] = crossfade({
+	duration: 200,
+	fallback: scale,
+})
+
 async function handleOpenCarousel(index) {
-	isCarouselOpen = true
-	initialIndex = index
+	const image = new Image()
+
+	image.addEventListener('load', () => {
+		isCarouselOpen = true
+		initialIndex = index
+	})
+	image.src = `${images[index].path.replace(/^static/, '')}`
 }
 
 function handleCloseCarousel() {
@@ -44,13 +56,19 @@ function handleCloseCarousel() {
 				{images}
 				isHidden={isCarouselOpen}
 				onOpen={handleOpenCarousel}
+				{send}
+				{receive}
 			/>
 			{#if isCarouselOpen}
-				<GalleryCarousel
-					{images}
-					{initialIndex}
-					onClose={handleCloseCarousel}
-				/>
+				{#await isCarouselOpen then}
+					<GalleryCarousel
+						{images}
+						{initialIndex}
+						onClose={handleCloseCarousel}
+						{send}
+						{receive}
+					/>
+				{/await}
 			{/if}
 			<div class="prose prose-invert md:prose-xl">
 				{@html content}