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

⚠️ Rework completely how transitions works

Browse Source 
- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn
- Code is safe on SSR side, using process.browser on this if
- The <main> element is on position absolute to fade nicely the different pages
- Code cleaning
This commit is contained in:
Félix Péault
2020-04-03 22:53:43 +02:00
parent 76e2f8242e
commit 7e0d1e33fb
21 changed files with 300 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/routes/index.svelte
View File

@@ -31,8 +31,7 @@
site,
currentLocation,
currentPhotos,
pageReady,
pageTransition
pageReady
} from 'utils/store'
import { charsToSpan } from 'utils/functions'
@@ -53,7 +52,6 @@
// Animations
import { animateIn } from 'animations/index'
pageTransition.onAnimationEnd = animateIn
// Props and variables
export let photos = ''
@@ -86,53 +84,55 @@
/>
</svelte:head>
<section class="intro">
<div class="anim-mask">
<div class="anim title-parallax" id="title-houses">
<h1 class="title-massive" aria-label="Houses">
{@html charsToSpan('Houses')}
<Transition animateIn={animateIn}>
<section class="intro">
<div class="anim-mask">
<div class="anim title-parallax" id="title-houses">
<h1 class="title-massive" aria-label="Houses">
{@html charsToSpan('Houses')}
</h1>
</div>
</div>
<div class="wrap" id="intro-description">
<div class="intro__description style-description">
<p>{$site.description}</p>
<Button type="a" href="#choose" class="button" text="Explore locations">
<IconGlobeSmall width="22" color="#666" />
</Button>
</div>
</div>
<div id="intro-carousel">
{#if photos}
<Carousel {photos} />
<Fullscreen />
{/if}
</div>
</section>
<section class="explore explore--homepage">
<div class="of" id="title-of" aria-label="of">
<div class="anim-mask">
{@html charsToSpan('of')}
</div>
</div>
<div class="explore__description style-description" id="choose">
<p>{$site.explore_globe}</p>
</div>
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World">
{@html charsToSpan('World')}
</h1>
</div>
</div>
<div class="wrap" id="intro-description">
<div class="intro__description style-description">
<p>{$site.description}</p>
<Locations />
</section>
<Button type="a" href="#choose" class="button" text="Explore locations">
<IconGlobeSmall width="22" color="#666" />
</Button>
</div>
</div>
<div id="intro-carousel">
{#if photos}
<Carousel {photos} />
<Fullscreen />
{/if}
</div>
</section>
<section class="explore explore--homepage">
<div class="of" id="title-of" aria-label="of">
<div class="anim-mask">
{@html charsToSpan('of')}
</div>
</div>
<div class="explore__description style-description" id="choose">
<p>{$site.explore_globe}</p>
</div>
<InteractiveGlobe />
<div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World">
{@html charsToSpan('World')}
</h1>
</div>
<Locations />
</section>
<Footer />
<Footer />
</Transition>