flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Run page animations onMount instead of browser

Browse Source
This commit is contained in:
Félix Péault
2022-05-30 21:57:04 +02:00
parent 7a165721d9
commit d3f74be59e
8 changed files with 279 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/routes/[country]/[location]/[photo].svelte
View File

@@ -213,88 +213,79 @@
}
/**
* Transition: Anime timeline
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
// Setup animations
timeline = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
})
anime.set('.viewer__picture', {
opacity: 0,
})
anime.set('.viewer__picture.is-1', {
translateY: 24,
})
// Photos
timeline.add({
targets: '.viewer__picture.is-1',
opacity: 1,
translateY: 0,
duration: 900,
}, 250)
timeline.add({
targets: '.viewer__picture:not(.is-0):not(.is-1)',
opacity: 1,
translateX (element: HTMLElement, index: number) {
const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
return [`-${x}`, 0]
},
delay: anime.stagger(55)
}, 500)
// Prev/Next buttons
timeline.add({
targets: '.viewer__controls button',
translateX (item: HTMLElement) {
let direction = item.classList.contains('prev') ? -1 : 1
return [16 * direction, 0]
},
opacity: [0, 1],
}, 450)
// Infos
timeline.add({
targets: '.viewer__info > *',
translateY: [24, 0],
opacity: [0, 1],
delay: anime.stagger(200)
}, 400)
anime.set('.viewer__index', {
opacity: 0
})
// Index
timeline.add({
targets: '.viewer__index',
opacity: 1,
duration: 900,
}, 600)
// Fly each number
timeline.add({
targets: '.viewer__index .char',
translateY: ['100%', 0],
delay: anime.stagger(200),
duration: 1000,
}, 700)
})
}
onMount(() => {
// Transition in
requestAnimationFrame(() => {
timeline.play()
/**
* Animations
*/
// Setup animations
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
})
anime.set('.viewer__picture', {
opacity: 0,
})
anime.set('.viewer__picture.is-1', {
translateY: 24,
})
// Photos
timeline.add({
targets: '.viewer__picture.is-1',
opacity: 1,
translateY: 0,
duration: 900,
}, 250)
timeline.add({
targets: '.viewer__picture:not(.is-0):not(.is-1)',
opacity: 1,
translateX (element: HTMLElement, index: number) {
const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
return [`-${x}`, 0]
},
delay: anime.stagger(55)
}, 500)
// Prev/Next buttons
timeline.add({
targets: '.viewer__controls button',
translateX (item: HTMLElement) {
let direction = item.classList.contains('prev') ? -1 : 1
return [16 * direction, 0]
},
opacity: [0, 1],
}, 450)
// Infos
timeline.add({
targets: '.viewer__info > *',
translateY: [24, 0],
opacity: [0, 1],
delay: anime.stagger(200)
}, 400)
anime.set('.viewer__index', {
opacity: 0
})
// Index
timeline.add({
targets: '.viewer__index',
opacity: 1,
duration: 900,
}, 600)
// Fly each number
timeline.add({
targets: '.viewer__index .char',
translateY: ['100%', 0],
delay: anime.stagger(200),
duration: 1000,
}, 700)
// Transition in
requestAnimationFrame(timeline.play)
})
</script>

88
src/routes/[country]/[location]/index.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/env'
import { navigating, page } from '$app/stores'
import { onMount } from 'svelte'
import anime from 'animejs'
@@ -108,52 +107,6 @@
}
/**
* Transition: Anime timeline
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
timeline = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
})
// Title word
timeline.add({
targets: '.location-page__intro .word',
translateY: ['110%', 0],
delay: anime.stagger(200)
}, 200 + ($navigating ? DURATION.PAGE_IN : 0))
// Illustration
timeline.add({
targets: '.location-page__illustration',
scale: [1.06, 1],
opacity: [0, 1],
duration: 2400,
}, 400 + ($navigating ? DURATION.PAGE_IN : 0))
// Title of
timeline.add({
targets: '.location-page__intro .of',
opacity: [0, 1],
duration: 1200,
}, 1050 + ($navigating ? DURATION.PAGE_IN : 0))
// Description
timeline.add({
targets: '.location-page__description',
translateY: ['10%', 0],
opacity: [0, 1],
}, 900 + ($navigating ? DURATION.PAGE_IN : 0))
})
}
onMount(() => {
// Photos IntersectionObserver
observerPhotos = new IntersectionObserver(entries => {
@@ -186,11 +139,48 @@
const existingPhotos = photosListEl.querySelectorAll('.house')
existingPhotos.forEach(el => observerPhotos.observe(el))
/**
* Animations
*/
// Transition in
requestAnimationFrame(() => {
timeline.play()
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
})
// Title word
timeline.add({
targets: '.location-page__intro .word',
translateY: ['110%', 0],
delay: anime.stagger(200)
}, 200 + ($navigating ? DURATION.PAGE_IN : 0))
// Illustration
timeline.add({
targets: '.location-page__illustration',
scale: [1.06, 1],
opacity: [0, 1],
duration: 2400,
}, 400 + ($navigating ? DURATION.PAGE_IN : 0))
// Title of
timeline.add({
targets: '.location-page__intro .of',
opacity: [0, 1],
duration: 1200,
}, 1050 + ($navigating ? DURATION.PAGE_IN : 0))
// Description
timeline.add({
targets: '.location-page__description',
translateY: ['10%', 0],
opacity: [0, 1],
}, 900 + ($navigating ? DURATION.PAGE_IN : 0))
requestAnimationFrame(timeline.play)
// Destroy
return () => {