Merge branch 'release/0.0.36'

src/lib/components/Heading.svelte

@@ -58,7 +58,7 @@
 <style lang="scss">
 	.c-heading__h1 {
 		// text-shadow: -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
-		font-size: clamp(64px, calc(80px + (220 - 80) * (100vw - 768px) / (1920 - 768)), 175px);
+		font-size: clamp(64px, calc(80px + (180 - 80) * (100vw - 768px) / (1920 - 768)), 175px);
 
 		//font-size: clamp(16px, calc(20px + (36 - 20) * (100vw - 768px) / (1920 - 768)), 48px);
 

src/lib/components/Image.svelte

@@ -4,6 +4,7 @@
 
 	import { cls } from '$lib/styles';
 	import { ScrollTrigger } from '$lib/gsap';
+	import { useTransitionReady } from '$lib/utils/useTransitionReady';
 
 	export let aspect: 'square' | 'video' | 'portrait' | 'auto' = 'video';
 	export let animated: boolean = true;
@@ -39,7 +40,9 @@
 
 	onMount(() => {
 		setStyleContainer();
+	});
 
+	useTransitionReady(() => {
 		if (animated) {
 			scrollTrigger = ScrollTrigger.create({
 				trigger: el,

src/lib/components/RichtextTransition.svelte

@@ -18,58 +18,63 @@
 	onMount(() => {
 		if (enabled) {
 			paragraphs = element.querySelectorAll('p:not(:empty)');
-			gsap.set(paragraphs, { opacity: 0 });
 		}
 	});
 
 	useTransitionReady(
 		() => {
 			if (enabled) {
 				ctx = gsap.context(() => {
-					paragraphs.forEach((p: any) => {
-						gsap.set(p, { opacity: 1 });
+					if (paragraphs?.length > 0) {
+						paragraphs.forEach((p: any) => {
+							gsap.set(p, { opacity: 1 });
 
-						const text = new SplitText(p, {
-							type: 'lines,words,chars',
-							linesClass: 'split-line',
-							charClass: 'split-char'
-						});
+							const text = new SplitText(p, {
+								type: 'lines,words,chars',
+								linesClass: 'split-line',
+								charClass: 'split-char'
+							});
 
-						gsap.set(text.words, { yPercent: 200, opacity: 0 });
+							if (text.words.length > 0) {
+								gsap.set(text.words, { yPercent: 200, opacity: 0 });
 
-						ScrollTrigger.batch(text.words, {
-							start: 'top 90%',
-							end: 'bottom 10%',
-							top: 'top center',
-							toggleActions: 'restart pause resume reverse',
-							onEnter(elements: any, triggers: any) {
-								gsap.to(elements, {
-									duration: 0.4,
-									ease: 'circ.out',
-									yPercent: 0,
-									opacity: 1,
-									stagger: 0.005
+								ScrollTrigger.batch(text.words, {
+									start: 'top 90%',
+									end: 'bottom 10%',
+									top: 'top center',
+									toggleActions: 'restart pause resume reverse',
+									onEnter(elements: any, triggers: any) {
+										gsap.to(elements, {
+											duration: 0.4,
+											ease: 'circ.out',
+											yPercent: 0,
+											opacity: 1,
+											stagger: 0.005
+										});
+									}
 								});
 							}
-						});
 
-						gsap.set(text.lines, { skewY: 5 });
+							if (text.lines.length > 0) {
+								gsap.set(text.lines, { skewY: 5 });
 
-						ScrollTrigger.batch(text.lines, {
-							start: 'top 90%',
-							end: 'bottom 10%',
-							top: 'top center',
-							toggleActions: 'restart pause resume reverse',
-							onEnter(elements: any, triggers: any) {
-								gsap.to(elements, {
-									duration: 0.4,
-									ease: 'circ.out',
-									skewY: 0,
-									stagger: 0.02
+								ScrollTrigger.batch(text.lines, {
+									start: 'top 90%',
+									end: 'bottom 10%',
+									top: 'top center',
+									toggleActions: 'restart pause resume reverse',
+									onEnter(elements: any, triggers: any) {
+										gsap.to(elements, {
+											duration: 0.4,
+											ease: 'circ.out',
+											skewY: 0,
+											stagger: 0.02
+										});
+									}
 								});
 							}
 						});
-					});
+					}
 				}, element);
 			}
 		},

src/lib/components/ScrollActionToPage.svelte

@@ -45,7 +45,7 @@
 
 						ctx?.revert();
 						scrollTrigger?.kill();
-						goto(base + href);
+						setTimeout(() => goto(base + href), 0);
 					}
 				});
 

src/lib/components/Video.svelte

@@ -7,6 +7,7 @@
 	import gsap from '$lib/gsap';
 	import { Image } from '$lib/components';
 	import { cursorType } from '$lib/stores';
+	import { useTransitionReady } from '$lib/utils/useTransitionReady';
 
 	let clazz: string = '';
 	export { clazz as class };
@@ -79,6 +80,10 @@
 	}
 
 	onMount(() => {
+		gsap.set(videoContainer, { clipPath: 'inset(0)' });
+	});
+
+	useTransitionReady(() => {
 		let mm = gsap.matchMedia();
 		const clipPath = (2 / 12) * 100;
 		const scale = offsetWidth / innerWidth;
@@ -153,6 +158,7 @@
 			/>
 		{:else if videoUrl}
 			<video
+				preload="metadata"
 				class={cls(!autoplay && posterUrl && 'absolute z-10', 'h-auto w-full')}
 				src={videoUrl}
 				bind:this={videoPlayer}

src/lib/storyblok/CardsScroller.svelte

@@ -37,22 +37,25 @@
 		}
 	});
 
-	function getScrollAmount() {
-		return -(scrollEl.scrollWidth - innerWidth);
-	}
-
 	useTransitionReady(
 		() => {
 			ctx = gsap.context(() => {
 				if (!scrollEl || !scrollEl.scrollWidth) return;
 
 				gsap.to(scrollEl, {
-					x: () => scrollEl.scrollWidth * -1,
+					x: () => {
+						return scrollEl?.scrollWidth ? scrollEl.scrollWidth * -1 : 0;
+					},
 					xPercent: 100,
 					scrollTrigger: {
 						trigger: scrollEl,
 						start: 'center center',
-						end: () => `+=${getScrollAmount() * -1}`,
+						end: () => {
+							if (scrollEl?.scrollWidth && innerWidth) {
+								return `+=${scrollEl.scrollWidth - innerWidth}`;
+							}
+							return 0;
+						},
 						pin: el,
 						scrub: true,
 						invalidateOnRefresh: true

src/lib/storyblok/HeadlineVideo.svelte

@@ -280,6 +280,7 @@
 					style="--video-effect: {videoTransformEffect}; --rotation-x: {videoRotation.x}deg; --rotation-y: {videoRotation.y}deg"
 				>
 					<video
+						preload="metadata"
 						bind:this={videoPlayer}
 						on:click={videoPlaying ? playPauseVideo : startVideo}
 						on:mouseenter={videoPreviewOnEnter}

src/lib/storyblok/HighlightSection.svelte

@@ -45,6 +45,7 @@
 	>
 		<div class="col-span-10 col-start-3">
 			<video
+				preload="metadata"
 				class="aspect-video w-full"
 				bind:this={videoPlayer}
 				src={blok.video}

src/lib/storyblok/TagsList.svelte

@@ -79,7 +79,7 @@
 							on:inview_change={inViewColorTransition}
 						>
 							<span class="mx-8 flex items-center">
-								<Heading as="h4" size="h2" class="mr-16 uppercase">
+								<Heading as="h4" size="h2" class="mr-16 uppercase" animated={false}>
 									<StoryblokComponent blok={b} />
 								</Heading>
 								<span class="inline-block font-degular-display text-6xl 3xl:text-7xl">*</span>

src/lib/utils/useCurtains.ts

@@ -1,6 +1,7 @@
-import { onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import { curtains } from '$lib/stores';
 import type { Curtains } from '@types/curtainsjs';
+import { useTransitionReady } from './useTransitionReady';
 
 export type CurtainsInstance = null | Curtains;
 
@@ -17,11 +18,13 @@ export function useCurtains(
 		}
 	};
 
-	onMount(() => {
+	useTransitionReady(() => {
 		isMounted = true;
 		launchCallback();
+	});
 
-		return () => cleanUp(curtainsInstance);
+	onDestroy(() => {
+		cleanUp(curtainsInstance);
 	});
 
 	const unsubscribeCurtains = curtains.subscribe((value) => {

src/routes/Loader.svelte

@@ -30,10 +30,10 @@
 		}
 	};
 
-	onMount(async () => {
+	onMount(() => {
 		if (skip) {
 			requestAnimationFrame(ready);
-			hideLoader();
+			hide();
 			return;
 		}
 

src/routes/PageTransitionAnim.svelte

@@ -152,13 +152,13 @@
 				project_list_hover.set(null);
 				showTitle = false;
 
-				const hash = $page.url.hash.slice(1);
+				const search = $page.url.searchParams.get('slug');
 
 				if ($lenis) {
 					$lenis.start();
 
-					if (hash) {
-						const scrollElem = document.getElementById(hash);
+					if (search) {
+						const scrollElem = document.getElementById(search);
 
 						if (scrollElem) {
 							$lenis.scrollTo(scrollElem, {

src/routes/work/+page.svelte

@@ -115,7 +115,7 @@
 
 	<div>
 		{#each projects as { name, slug, content }, index (name)}
-			<div class="grid grid-cols-12">
+			<div class="grid grid-cols-12" id={`${slug}`}>
 				<ProjectListItem
 					theme="dark"
 					hover={$project_list_hover === name}

src/routes/work/[slug]/+page.svelte

@@ -134,7 +134,9 @@
 				/>
 			</div>
 			<div class=" max-w-4xl py-16">
-				<Heading as="h2" size="h2">{@html description}</Heading>
+				<Heading as="h2" size="h2" animated={false}
+					><RichtextTransition>{@html description}</RichtextTransition></Heading
+				>
 			</div>
 		</div>
 		{#if data.story.content.ask_text}
@@ -188,4 +190,8 @@
 	{/if}
 </section>
 
-<ScrollActionToPage href={'/work'} label={'All projects'} disabled={!!preview} />
+<ScrollActionToPage
+	href={`/work?slug=${data.story.slug}`}
+	label={'All projects'}
+	disabled={!!preview}
+/>