diff --git a/src/lib/actions/reveal.ts b/src/lib/actions/reveal.ts index 94a8025..f45ed99 100644 --- a/src/lib/actions/reveal.ts +++ b/src/lib/actions/reveal.ts @@ -1,7 +1,18 @@ +export interface RevealOptions { + threshold?: number; + rootMargin?: string; + trigger?: unknown; +} + export function reveal( node: HTMLElement, - options = { threshold: 0.08, rootMargin: '0px 0px -30px 0px' } + options: RevealOptions = { threshold: 0.08, rootMargin: '0px 0px -30px 0px' } ) { + const observerOptions = { + threshold: options?.threshold !== undefined ? options.threshold : 0.08, + rootMargin: options?.rootMargin || '0px 0px -30px 0px' + }; + const observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { @@ -9,12 +20,23 @@ export function reveal( observer.unobserve(entry.target); } } - }, options); + }, observerOptions); + + const observeElements = () => { + const reveals = node.querySelectorAll('.reveal'); + reveals.forEach((el) => { + if (!el.classList.contains('visible')) { + observer.observe(el); + } + }); + }; - const reveals = node.querySelectorAll('.reveal'); - reveals.forEach((el) => observer.observe(el)); + observeElements(); return { + update() { + observeElements(); + }, destroy() { observer.disconnect(); } diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte index f1ae064..e00d4f2 100644 --- a/src/routes/cv/+page.svelte +++ b/src/routes/cv/+page.svelte @@ -46,13 +46,6 @@ .save() .then(async () => { showLinks = true; - const { tick } = await import('svelte'); - await tick(); - if (container) { - container.parentElement?.querySelectorAll('.reveal').forEach((el) => { - el.classList.add('visible'); - }); - } }); } @@ -65,7 +58,7 @@ /> -
+