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

🐛 Setup page transitions

Browse Source 
Bugged for some reason, the old page stays before the new page loading at the end
This commit is contained in:
Félix Péault
2021-11-17 21:54:22 +01:00
parent 1b181b92fc
commit 8b4070aeb2
12 changed files with 140 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,11 @@
<script lang="ts">
import { page } from '$app/stores'
import { getAssetUrlKey } from '$utils/helpers'
import { fade } from 'svelte/transition'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat.js'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import Icon from '$components/atoms/Icon.svelte'
@@ -95,14 +97,11 @@
/>
<main class="location-page">
<section class="location-page__intro grid"
style="
--illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
--illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
--illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
"
>
<main class="location-page"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<h1 class="title">
<span class="housesof">
<strong>Houses</strong>
@@ -155,7 +154,16 @@
</div>
</div>
<div class="location-page__illustration" />
<div class="location-page__illustration"
style="
--illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
--illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
--illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
--parallax-y: {illustrationOffsetY}px;
"
>
<div />
</div>
</section>
{#if photos.length}
@@ -174,7 +182,7 @@
</p>
</div>
<figure class="house__photo">
<a href="/{params.country}/{params.location}/{slug}">
<a href="/{params.country}/{params.location}/{slug}" sveltekit:prefetch sveltekit:noscroll>
<Image
id={id}
sizeKey="photo-list"

36
src/routes/__layout.svelte
View File

@@ -1,7 +1,9 @@
<script lang="ts">
import '../style/style.scss'
import { page } from '$app/stores'
import { setContext } from 'svelte'
import { navigating, page } from '$app/stores'
import { onMount, setContext } from 'svelte'
import { pageLoading } from '$utils/stores'
import { DURATION } from '$utils/contants'
import '$utils/polyfills'
// Components
import SVGSprite from '$components/SVGSprite.svelte'
@@ -16,6 +18,32 @@
...data,
count,
})
/**
* On page change
*/
navigating.subscribe((store: any) => {
if (store) {
$pageLoading = true
// Turn page loading when changing page
setTimeout(() => {
$pageLoading = false
}, DURATION.PAGE_IN * 1.25)
// Scroll back to top between page transitions
setTimeout(() => {
// scrollToTop()
window.scrollTo(0,0)
}, DURATION.PAGE_OUT)
}
})
onMount(() => {
// Avoid FOUC
document.body.style.opacity = '1'
})
</script>
<Switcher />
@@ -26,6 +54,10 @@
<Footer />
{/if}
{#if $pageLoading}
<div class="page-loading" />
{/if}
<SVGSprite />
<script context="module" lang="ts">

7
src/routes/credits.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { fade } from 'svelte/transition'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -14,7 +16,10 @@
/>
<main class="credits">
<main class="credits"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<section class="credits__heading">
<SiteTitle variant="inline" />
<p class="text-medium">{data.credits.text}</p>

12
src/routes/index.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import { getContext, onMount } from 'svelte'
import { fade } from 'svelte/transition'
import { page } from '$app/stores'
import { lerp, map } from '$utils/functions'
import anime from 'animejs'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SplitText from '$components/SplitText.svelte'
@@ -43,9 +44,9 @@
// Reveal text
introTimeline.add({
targets: '.homepage__headline',
translateY: [24, 0],
translateY: [16, 0],
opacity: [0, 1],
}, 600)
}, 900)
// Animate collage photos
introTimeline.add({
@@ -71,7 +72,10 @@
image=""
/>
<main class="homepage">
<main class="homepage"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<section class="homepage__intro">
<ScrollingTitle tag="h1" class="homepage__title--houses" label="Houses of the World" parallax={introTitleParallax} offsetTop={100}>
<SplitText text="Houses" mode="chars" />

7
src/routes/locations.svelte
View File

@@ -1,5 +1,7 @@
<script lang="ts">
import { getContext } from 'svelte'
import { fade } from 'svelte/transition'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -17,7 +19,10 @@
image=""
/>
<main class="explore">
<main class="explore"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<Heading
text="Explore the globe to discover unique locations across the world"
/>

3
src/routes/photos.svelte
View File

@@ -2,12 +2,13 @@
import { page } from '$app/stores'
import { browser } from '$app/env'
import { goto } from '$app/navigation'
import { fly } from 'svelte/transition'
import { getContext, onMount } from 'svelte'
import { fade, fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import { map, lerp, throttle } from '$utils/functions'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SplitText from '$components/SplitText.svelte'

7
src/routes/shop/__layout.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import { onMount } from 'svelte'
import { fade } from 'svelte/transition'
import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -57,7 +59,10 @@
image=""
/>
<main class="shop-page">
<main class="shop-page"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<Cart />
<section class="shop-page__intro" bind:this={introEl}>

7
src/routes/subscribe.svelte
View File

@@ -1,5 +1,7 @@
<script lang="ts">
import { fade } from 'svelte/transition'
import dayjs from 'dayjs'
import { DURATION } from '$utils/contants'
// Components
import Metas from '$components/Metas.svelte'
import Image from '$components/atoms/Image.svelte'
@@ -16,7 +18,10 @@
image=""
/>
<main class="subscribe">
<main class="subscribe"
in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
out:fade={{ duration: DURATION.PAGE_OUT }}
>
<Heading
text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
/>

22
src/style/_base.scss
View File

@@ -86,4 +86,26 @@ button {
display: inline-block;
transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
}
}
// Mask for animations
.mask {
display: block;
overflow: hidden;
white-space: nowrap;
span {
display: inline-block;
}
}
// Page loading overlay
.page-loading {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: wait;
}

29
src/style/pages/_location.scss
View File

@@ -6,7 +6,6 @@
.location-page__intro {
position: relative;
background: $color-primary;
// padding-top: clamp(100px, 25vw, 400px);
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
@@ -154,19 +153,29 @@
position: absolute;
z-index: 1;
top: 0;
left: 50%;
left: 0;
right: 0;
width: clamp(320px, 100vw, 2560px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(-50%, 0, 0);
margin: 0 auto;
overflow: hidden;
transform-origin: top center;
div {
width: 100%;
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(0, var(--parallax-y), 0);
transition: transform 0.7s var(--ease-quart);
will-change: transform, opacity;
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
}
}
}

10
src/utils/contants.ts
View File

@@ -0,0 +1,10 @@
// Delays
export const DELAY = {
PAGE_LOADING: 600,
}
// Durations
export const DURATION = {
PAGE_IN: 400,
PAGE_OUT: 400,
}

3
src/utils/stores/index.ts
View File

@@ -0,0 +1,3 @@
import { writable } from 'svelte/store'
export const pageLoading = writable(false)