I solved my issue when I completely refactored how I implemented scroll trigger. I moved all the logic to +layout.svelte like so:
<script>
import '../app.css'
import { gsap } from 'gsap'
import { ScrollSmoother } from 'gsap/dist/ScrollSmoother'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
import BaseNav from '$lib/components/base-nav.svelte'
import { onMount } from 'svelte'
export let data
/**
* @type {ScrollSmoother}
*/
let smoother
if (typeof window !== 'undefined') {
gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
}
onMount(() => {
smoother = ScrollSmoother.create({
smooth: 1,
effects: false
})
})
/**
* @param {HTMLElement} node
* @param {Object} options
* @param {number} [options.duration]
* @param {number} [options.delay]
*/
// out transition
function wipe(node, { duration = 250, delay = 0 }) {
// pulling "from" page out of document flow and positioning it absolutely over "to" page
gsap.set(node, {
position: 'fixed',
inset: 0,
width: '100%',
height: window.innerHeight,
zIndex: 9999,
overflow: 'hidden',
backgroundColor: '#fff',
opacity: 1,
visibility: 'visible'
})
// prevent scrollY from jumping to top of page
gsap.set(node.firstChild, {
y: -window.scrollY
})
// make sure "to" page is scrolled to top
smoother.scrollTop(0)
const tl = gsap.timeline({ delay, defaults: { duration: duration / 1000 } })
tl.to(node, {
height: 0,
ease: 'power4.inOut'
})
return {
duration,
delay,
/**
* The function to call on each animation frame.
* @param {number} t - The current tick value.
*/
tick: (t) => {
tl.progress(1 - t)
}
}
}
</script>
<BaseNav />
<div id="smooth-wrapper">
<div id="smooth-content">
{#key data.url.pathname}
<main out:wipe={{ duration: 2000 }} on:outroend={() => ScrollTrigger.refresh()}>
<slot />
</main>
{/key}
</div>
</div>
I hope that helps anyone who tries to work with Svelte transitions and ScrollSmoother.
