diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index e51ce66..125b5ee 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -6,6 +6,7 @@ import { quartOut } from 'svelte/easing' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime.js' + import anime from 'animejs' import { map, lerp, throttle } from '$utils/functions' import { DURATION } from '$utils/contants' // Components @@ -240,6 +241,37 @@ onMount(() => { + /** + * Entering animation + */ + const timeline = anime.timeline({ + duration: 1600, + easing: 'easeOutQuart', + }) + + // Reveal text + timeline.add({ + targets: '.photos__intro .discover', + translateY: [16, 0], + opacity: [0, 1], + }, 900) + + // Filters + timeline.add({ + targets: '.photos__intro .filter', + translateY: [16, 0], + opacity: [0, 1], + complete ({ animatables }) { + const element = animatables[0].target + // Remove style to not interfere with CSS when scrolling back up over photos + element.removeAttribute('style') + } + }, 1300) + + + /** + * Observers + */ // Photos IntersectionObserver observerPhotos = new IntersectionObserver(entries => { entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {