WIP Animations all over site

- Run a transition In for each page
- Involve a "loader" panel on page change
- TODO: tweak the animations and finish the concept
This commit is contained in:
2020-03-06 14:22:51 +01:00
parent cd1033f97b
commit 9ffc210c02
27 changed files with 827 additions and 296 deletions

View File

@@ -1,12 +1,5 @@
<script context="module">
import {
apiEndpoints,
site,
locations,
currentLocation,
currentPhotos
} from '../../../utils/store'
import { stores } from '@sapper/app'
import { apiEndpoints } from '../../../utils/store'
// Preload data
export async function preload (page, session) {
@@ -22,11 +15,20 @@
<script>
import { onMount } from 'svelte'
import { stores } from '@sapper/app'
import {
site,
locations,
currentLocation,
currentPhotos,
pageReady,
pageTransition
} from '../../../utils/store'
import { formatDate, relativeTime, getThumbnail } from '../../../utils/functions'
const { page } = stores()
// Dependencies
import AOS from 'aos'
import lazySizes from 'lazysizes'
// Components
import IconGlobe from '../../../atoms/IconGlobe'
@@ -39,6 +41,10 @@
import Footer from '../../../organisms/Footer'
import SocialMetas from '../../../utils/SocialMetas'
// Animations
import { animateIn } from '../../../animations/place'
pageTransition.onAnimationEnd = animateIn
// Props and variables
export let photos
let layoutSetting
@@ -70,18 +76,15 @@
/*
** Run code on browser only
** Run code when mounted
*/
onMount(() => {
// Page is loaded
pageReady.set(true)
// Get layout setting from storage
layoutSetting = localStorage.getItem('photosLayout')
if (process.browser) {
// Scroll apparitions
AOS.init()
}
})
</script>
<svelte:head>
@@ -95,6 +98,7 @@
/>
</svelte:head>
<section class="place">
<div class="place__title">
<h1 class="title-location title-location--big" aria-label="Houses of {location.name}">