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

WIP attempt to fix page transitions, Several edits
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-02 16:07:16 +02:00
parent 6f409c5331
commit 730eb75457
34 changed files with 386 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/animations/Carousel.js
View File

@@ -1,56 +1,39 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
// import { animDuration } from 'utils/store'
import { transitionNormal, transitionDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
// Card: Active
const cardActive = ScrollOut({
once: true,
targets: scope.querySelector('.gallery__photo--active'),
onShown (el) {
anime({
targets: el,
top: [32, 0],
duration: 1200,
delay: 650,
easing: 'easeOutQuart'
})
}
// Timeline
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: transitionNormal,
delay: transitionDelay
})
// Photo: Active
tl.add({
targets: scope.querySelector('.is-active picture'),
translateY: [32, 0]
}, 400)
// Photo: Prev
tl.add({
targets: scope.querySelector('.is-prev picture'),
translateY: [8, 0],
translateX: [64, 0]
}, 550)
// Photo: Next
tl.add({
targets: scope.querySelector('.is-next picture'),
translateY: [8, 0],
translateX: [-48, 0]
}, 550)
// Card: Prev
const cardPrev = ScrollOut({
const carouselIn = ScrollOut({
once: true,
targets: scope.querySelector('.gallery__photo--prev'),
onShown (el) {
anime({
targets: el,
top: [5, 0],
left: [-64, 0],
duration: 1200,
delay: 690,
easing: 'easeOutQuart'
})
}
})
// Card: Prev
const cardNext = ScrollOut({
once: true,
targets: scope.querySelector('.gallery__photo--next'),
onShown (el) {
anime({
targets: el,
top: [5, 0],
left: [48, 0],
duration: 1200,
delay: 710,
easing: 'easeOutQuart'
})
}
targets: scope,
onShown: () => tl.restart()
})
}

2
src/animations/Locations.js
View File

@@ -1,6 +1,6 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionLong } from 'utils/store'
/*

12
src/animations/TitleSite.js
View File

@@ -1,12 +1,12 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
export const animateIn = (scope, init) => {
// On scroll animation
const title = ScrollOut({
once: true,
@@ -16,16 +16,16 @@ export const animateIn = scope => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
delay: anime.stagger(40),
duration: 1000,
easing: 'easeOutQuart'
easing: 'easeOutQuart',
delay: anime.stagger(40, { start: init ? 0 : transitionDelay }),
duration: 1000
})
// Word in between
anime({
targets: el.querySelectorAll('em span'),
opacity: [0, 1],
delay: anime.stagger(80, { start: 400 }),
delay: anime.stagger(80, { start: (init ? 0 : transitionDelay) + 400 }),
duration: 1000,
easing: 'easeOutQuart'
})

65
src/animations/Transition.js
View File

@@ -1,32 +1,34 @@
import anime from 'animejs'
import { animDuration, animDurationLong } from 'utils/store'
import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
// Panel itself
const transition = anime({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 1],
opacity: [0, 1],
duration: 400,
const tl = anime.timeline({
duration: transitionPanelIn,
easing: 'easeInOutQuart',
begin () {
begin: () => {
// Show the panel
scope.classList.remove('hidden')
}
})
// Panel itself
tl.add({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 1],
opacity: [0, 1],
duration: transitionPanelIn
}, 0)
// Globe icon
const globe = anime({
tl.add({
targets: scope.querySelector('svg'),
opacity: [0, 1],
translateY: ['16px', 0],
duration: 400,
easing: 'easeInOutQuart'
})
translateY: ['3vh', 0],
duration: transitionPanelIn
}, 0)
}
@@ -34,14 +36,9 @@ export const animateIn = scope => {
** Transition Out
*/
export const animateOut = (scope, callback) => {
// Background
const background = anime({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 0],
duration: animDurationLong,
delay: 800,
const tl = anime.timeline({
easing: 'easeInOutQuart',
complete () {
complete: () => {
// Hide the panel
scope.classList.add('hidden')
@@ -50,23 +47,29 @@ export const animateOut = (scope, callback) => {
}
})
// Background
tl.add({
targets: scope.querySelector('.transition__background'),
scaleY: [1, 0],
duration: transitionLong
}, 600)
// Title
const title = anime({
tl.add({
targets: scope.querySelector('.title-location'),
opacity: [1, 0],
translateY: [0, '-50vh'],
duration: animDuration,
delay: 1000,
easing: 'easeInOutQuart'
})
duration: transitionNormal
}, 850)
// Globe icon
const globe = anime({
tl.add({
targets: scope.querySelector('svg'),
opacity: [1, 0],
translateY: [0, '-50vh'],
duration: animDuration,
delay: 1000,
easing: 'easeInOutQuart'
})
duration: transitionNormal
}, 850)
// Play
tl.play()
}

133
src/animations/index.js
View File

@@ -1,6 +1,6 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionNormal, transitionLong, transitionDelay } from 'utils/store'
import { throttle, parallaxAnime } from 'utils/functions'
@@ -9,67 +9,65 @@ import { throttle, parallaxAnime } from 'utils/functions'
*/
export const animateIn = () => {
// Title: Houses
const titleHouses = ScrollOut({
once: true,
targets: '#title-houses',
onShown (el) {
// const titleHouses = ScrollOut({
// once: true,
// targets: '#title-houses',
// onShown (el) {
// Reveal each letter
anime({
targets: el.querySelectorAll('span'),
translateY: ['-70%', 0],
delay: anime.stagger(80),
duration: animDuration,
easing: 'easeOutQuart'
})
// Parallax on scroll
const translate = anime({
targets: el,
translateX: ['7%', '-15%'],
easing: 'linear',
autoplay: false,
duration: animDuration
})
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden () {
window.removeEventListener('scroll', parallaxAnime)
}
anime({
targets: document.querySelectorAll('#title-houses span'),
translateY: ['-70%', 0],
delay: anime.stagger(80, { start: transitionDelay }),
duration: transitionNormal,
easing: 'easeOutQuart'
})
// Parallax on scroll
const translate = anime({
targets: '#title-houses',
translateX: ['7%', '-15%'],
easing: 'linear',
autoplay: false,
duration: transitionNormal
})
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
// },
// onHidden: () => window.removeEventListener('scroll', parallaxAnime)
// })
// Intro: Description
const introDescription = ScrollOut({
once: true,
targets: '#intro-description',
onShown (el) {
anime({
targets: el.querySelectorAll('p, a'),
opacity: [0, 1],
translateY: [8, 0],
duration: animDuration,
delay: anime.stagger(200, { start: 400 }),
easing: 'easeOutQuart'
})
}
// const introDescription = ScrollOut({
// once: true,
// targets: '#intro-description',
// onShown (el) {
anime({
targets: '#intro-description p, #intro-description a',
opacity: [0, 1],
translateY: [8, 0],
easing: 'easeOutQuart',
duration: transitionNormal,
delay: anime.stagger(200, { start: transitionDelay + 400 })
})
// }
// })
// Intro: Carousel
const introCarousel = ScrollOut({
once: true,
// const introCarousel = ScrollOut({
// once: true,
// targets: '#intro-carousel',
// onShown (el) {
anime({
targets: '#intro-carousel',
onShown (el) {
anime({
targets: el,
opacity: [0, 1],
translateY: [24, 0],
duration: animDuration,
delay: 650,
easing: 'easeOutQuart',
complete: () => el.removeAttribute('style')
})
}
opacity: [0, 1],
translateY: [24, 0],
easing: 'easeOutQuart',
duration: transitionNormal,
delay: transitionDelay + 600,
complete: event => event.animatables[0].target.removeAttribute('style')
})
// }
// })
// Title: Of
const titleOf = ScrollOut({
@@ -79,9 +77,9 @@ export const animateIn = () => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
easing: 'easeOutQuart'
duration: transitionNormal
})
}
})
@@ -94,9 +92,9 @@ export const animateIn = () => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
easing: 'easeOutQuart'
duration: transitionNormal
})
// Parallax on scroll
@@ -105,14 +103,27 @@ export const animateIn = () => {
translateX: ['5%', '-3%'],
easing: 'linear',
autoplay: false,
duration: animDuration
duration: transitionNormal
})
window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
setTimeout(() => parallaxAnime(el, translate), 50)
},
onHidden() {
window.removeEventListener('scroll', parallaxAnime)
}
onHidden: () => window.removeEventListener('scroll', parallaxAnime)
})
}
/*
** Transition Out
*/
export const animateOut = () => {
anime({
targets: document.querySelector('#title-houses'),
translateY: ['-70%', 0],
opacity: [1, 0],
duration: transitionNormal,
easing: 'easeOutQuart'
})
}

30
src/animations/page.js
View File

@@ -1,25 +1,25 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration, animDurationLong } from 'utils/store'
import { transitionNormal, transitionDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = () => {
// Simple fade
const page = ScrollOut({
once: true,
targets: '.page',
onShown (el) {
anime({
targets: '.page__part',
opacity: [0, 1],
translateY: [8, 0],
duration: 1800,
delay: anime.stagger(220, { start: animDurationLong * 0.3 }),
easing: 'easeOutQuart'
})
}
// Simple slide and fade on each part of the page
// const page = ScrollOut({
// once: true,
// targets: '.page',
// onShown (el) {
anime({
targets: document.querySelectorAll('.page__part'),
opacity: [0, 1],
translateY: [8, 0],
easing: 'easeOutQuart',
duration: transitionNormal,
delay: anime.stagger(220, { start: transitionDelay }),
})
// }
// })
}

24
src/animations/place.js
View File

@@ -1,6 +1,6 @@
import anime from 'animejs'
// import ScrollOut from 'scroll-out'
import { animDuration } from 'utils/store'
import { transitionNormal, transitionDelay } from 'utils/store'
/*
@@ -9,7 +9,7 @@ import { animDuration } from 'utils/store'
export const animateIn = () => {
const tl = anime.timeline({
duration: 1800,
delay: 1800,
delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
easing: 'easeOutQuart'
})
@@ -17,27 +17,27 @@ export const animateIn = () => {
tl.add({
targets: '.place__title_houses',
translateY: ['150%', 0],
duration: animDuration
})
duration: transitionNormal
}, 200)
// Title: Of
tl.add({
targets: '.place__title_of',
opacity: [0, 1],
duration: 800
}, 550)
duration: transitionNormal
}, 800)
// Title: Place name
tl.add({
targets: '.place__title_name',
translateY: ['150%', 0],
duration: animDuration
}, 200)
duration: transitionNormal
}, 350)
// Switcher link
tl.add({
targets: '.place__title .button-control',
scale: [0.95, 1],
opacity: [0, 1],
duration: animDuration
duration: transitionNormal
}, 700)
// Illustration
@@ -45,7 +45,7 @@ export const animateIn = () => {
targets: '.place__illustration',
scale: [1.075, 1],
opacity: [0, 1],
duration: animDuration
duration: transitionNormal
}, 200)
// Description
@@ -53,8 +53,8 @@ export const animateIn = () => {
targets: '.place__description',
opacity: [0, 1],
translateY: [24, 0],
duration: animDuration
}, 800)
duration: transitionNormal
}, 650)
// Play
tl.play()

8
src/animations/viewer.js
View File

@@ -1,5 +1,5 @@
import anime from 'animejs'
import { animDuration } from 'utils/store'
import { transitionNormal } from 'utils/store'
/*
@@ -10,7 +10,7 @@ export const animateIn = () => {
anime({
targets: '.viewer__top p, .viewer__top .buttons a',
translateY: [-32, 0],
duration: animDuration,
duration: transitionNormal,
delay: anime.stagger(150, { start: 600 }),
easing: 'easeOutQuart'
})
@@ -20,7 +20,7 @@ export const animateIn = () => {
targets: '.viewer .carousel',
opacity: [0, 1],
translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
duration: animDuration,
duration: transitionNormal,
delay: 300,
easing: 'easeOutQuart'
})
@@ -30,7 +30,7 @@ export const animateIn = () => {
targets: '.viewer .carousel__number_column',
opacity: [0, 1],
marginTop: [24, 0],
duration: animDuration,
duration: transitionNormal,
delay: anime.stagger(100, { start: 450 }),
easing: 'easeOutQuart'
})

2
src/atoms/IconGlobe.svelte
View File

@@ -15,7 +15,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width={width} viewBox="0 0 56 75"
fill={color}
class="icon-globe" class:icon-svg--animated={animated}
class="icon-svg icon-globe" class:is-animated={animated}
>
<defs>
<clipPath id={randomId}>

2
src/atoms/IconGlobeSmall.svelte
View File

@@ -15,7 +15,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width={width} viewBox="0 0 56 56"
fill={color}
class="icon-globe icon-globe--small" class:icon-svg--animated={animated}
class="icon-svg icon-globe icon-globe--small" class:is-animated={animated}
>
<defs>
<clipPath id={randomId}>

5
src/atoms/TitleSite.svelte
View File

@@ -5,7 +5,8 @@
// Animations
import { animateIn } from 'animations/TitleSite'
// Variables
// Props and variables
export let init = false
let scope
let mounted = false
@@ -14,8 +15,8 @@
** Run code on component mount
*/
onMount(() => {
animateIn(scope, init)
mounted = true
animateIn(scope)
})
</script>

34
src/organisms/Carousel.svelte
View File

@@ -56,7 +56,7 @@
// Hover on controls
const hoverPhoto = event => {
const button = event.currentTarget.querySelector('button')
const photoActive = scope.querySelector('.gallery__photo--active')
const photoActive = scope.querySelector('.is-active')
let photoToHover
if (event.currentTarget.dataset.to === 'prev') {
@@ -114,7 +114,7 @@
*/
onMount(() => {
// Entering transition
if (photos.length) {
if (photos) {
animateIn(scope)
}
@@ -134,7 +134,7 @@
<svelte:window on:keydown={keyboardNav} />
{#if photos.length}
{#if photos}
<div class="carousel"
bind:this={scope}
on:swipe={event => swipe(event.detail.directions)}
@@ -143,18 +143,20 @@
<div class="gallery">
<div class="gallery__images">
{#each photos as { id, name, location, image }, index}
<picture class="gallery__photo"
class:gallery__photo--prev={id === prevPhoto.id}
class:gallery__photo--active={id === currentPhoto.id}
class:gallery__photo--next={id === nextPhoto.id}
<div class="gallery__photo"
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
class:is-next={id === nextPhoto.id}
on:click={openFullscreen}
>
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
</picture>
<picture class="gallery__picture">
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
</picture>
</div>
{/each}
</div>
@@ -189,9 +191,9 @@
<div class="carousel__locations">
{#each photos as { id, name, location }, index}
<div class="carousel__location style-location"
class:carousel__location--prev={id === prevPhoto.id}
class:carousel__location--active={id === currentPhoto.id}
class:carousel__location--next={id === nextPhoto.id}
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
class:is-next={id === nextPhoto.id}
>
<p class="street">{name}</p>
<p class="state style-caps style-caps--transparent">

7
src/routes/_layout.svelte
View File

@@ -70,7 +70,8 @@
site,
continents,
countries,
locations
locations,
pageReady
} from 'utils/store'
// Components
@@ -106,7 +107,9 @@
<link rel="canonical" href={`https://${$page.host}${$page.path}`} />
</svelte:head>
<slot></slot>
<main class="housesof" style="opacity: { $pageReady ? 1 : 0}">
<slot></slot>
</main>
{#if process.env.CONFIG.TRANSITION === 'true'}
<Transition />

4
src/routes/credits.svelte
View File

@@ -75,9 +75,9 @@
{/each}
</div>
{/if}
<InteractiveGlobe type="part" />
</div>
<InteractiveGlobe type="part" />
<Footer />
</section>

7
src/routes/index.svelte
View File

@@ -24,7 +24,7 @@
</script>
<script>
import { onMount } from 'svelte'
import { onMount, onDestroy } from 'svelte'
import { stores } from '@sapper/app'
import {
apiEndpoints,
@@ -56,7 +56,7 @@
pageTransition.onAnimationEnd = animateIn
// Props and variables
export let photos
export let photos = ''
const { page } = stores()
// Reset current location if existing
@@ -106,9 +106,10 @@
</div>
<div id="intro-carousel">
{#if photos}
<Carousel {photos} />
<Fullscreen />
{/if}
</div>
</section>

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

@@ -6,7 +6,8 @@
// Load photos
const fields = [
'id', 'name', 'slug', 'date', 'image.private_hash',
'location.id', 'location.name', 'location.slug', 'location.region', 'location.country.name', 'location.country.slug',
'location.id', 'location.name', 'location.slug', 'location.region',
'location.country.name', 'location.country.slug',
'created_on', 'modified_on'
].join(',')
const sort = ['-created_on', 'name'].join(',')
@@ -58,6 +59,7 @@
// Update current location
const location = $locations.find(loc => loc.slug === $page.params.place)
const { description, country, illustration_desktop, illustration_mobile } = location
currentLocation.set(location)
currentPhotos.set(photos)
@@ -96,12 +98,12 @@
</script>
<svelte:head>
<title>{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}</title>
<meta name="description" content="{$site.seo_name} {location.name} {location.description}">
<title>{$site.seo_name} – Beautiful houses of {location.name}, {country.name}</title>
<meta name="description" content="{$site.seo_name} {location.name} {description}">
<SocialMetas
url="https://{$page.host}/location/{location.country.slug}/{location.slug}"
title="{$site.seo_name} – Beautiful houses of {location.name}, {location.country.name}"
description="{$site.seo_name} {location.name} {location.description}"
url="https://{$page.host}/location/{country.slug}/{location.slug}"
title="{$site.seo_name} – Beautiful houses of {location.name}, {country.name}"
description="{$site.seo_name} {location.name} {description}"
image={latestPhoto ? getThumbnail(latestPhoto.image.private_hash, 1200, 630) : null}
/>
</svelte:head>
@@ -135,17 +137,17 @@
<div class="wrapper">
<p>{$site.description}</p>
{#if location.description}
{#if description}
<p>
Houses Of
<LinkChange href="/choose" text={location.name} noScroll="true">
<IconGlobeSmall width="14" color="#999" />
</LinkChange>
{location.description}
{description}
</p>
{/if}
{#if photos.length}
{#if photos}
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -157,9 +159,9 @@
</div>
</div>
{#if location.illustration_desktop && location.illustration_mobile}
{#if illustration_desktop && illustration_mobile}
<div class="place__illustration"
style="--url-desktop: url({location.illustration_desktop.full_url}); --url-mobile: url({location.illustration_mobile.full_url});"
style="--url-desktop: url({illustration_desktop.full_url}); --url-mobile: url({illustration_mobile.full_url});"
/>
{/if}
</section>
@@ -169,7 +171,7 @@
<aside class="photos__side">
<Switcher type="switcher--side" />
{#if photos.length}
{#if photos}
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -178,7 +180,7 @@
</aside>
</div>
{#if photos.length}
{#if photos}
<div class="photos__view wrap">
{#each paginatedPhotos as photo, index}
<Photo

2
src/style/atoms/_button.scss
View File

@@ -78,7 +78,7 @@
background-color: $color-secondary;
svg {
fill: #fff !important;
fill: #fff;
}
.anim {
animation-play-state: running;

2
src/style/atoms/_icon-globe.scss
View File

@@ -19,7 +19,7 @@
}
// Animate by default
&--animated {
&.is-animated {
.anim {
animation-play-state: running;
}

5
src/style/layouts/_main.scss Normal file
View File

@@ -0,0 +1,5 @@
// Main page
.housesof {
transition: opacity 0.4s $ease-quart;
will-change: opacity;
}

195
src/style/organisms/_carousel.scss
View File

@@ -1,6 +1,11 @@
// Carousel
.carousel {
background-color: $color-primary;
overflow: hidden;
@include breakpoint (sm) {
overflow: visible;
}
.wrap {
max-width: 1280px;
@@ -52,7 +57,6 @@
&__photo {
$duration: 1s;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
top: 0;
@@ -60,21 +64,78 @@
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
will-change: transform, opacity, top, left;
@include breakpoint (sm) {
border-radius: $radius;
// Active photo
&.is-active {
opacity: 1;
z-index: 10;
transform: scale(1);
img {
opacity: 1;
}
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
// Previous & next photo
&.is-prev, &.is-next {
opacity: 1;
img {
opacity: 1;
}
picture:before {
@include breakpoint (sm) {
opacity: 0.4;
}
}
}
// Previous photo
&.is-prev {
z-index: 9;
transform: translate(-40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 8;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
}
// Hover
&.hover {
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
}
}
// Next photo
&.is-next {
z-index: 8;
transform: translate(40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 9;
transform: translate($distance, -1%) rotate($angle) scale($scale);
}
// Hover
&.hover {
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
}
}
}
// Picture
&__picture {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
@include breakpoint (sm) {
border-radius: $radius;
}
// Overlay
@@ -91,62 +152,13 @@
background-color: $color-primary;
}
// Active photo
&--active {
opacity: 1;
z-index: 10;
transform: scale(1);
img {
opacity: 1;
}
}
// Previous & next photo
&--prev, &--next {
opacity: 1;
img {
opacity: 1;
}
&:before {
@include breakpoint (sm) {
opacity: 0.4;
}
}
}
// Previous photo
&--prev {
z-index: 9;
transform: translate(-40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 8;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
}
// Hover
&.hover {
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
}
}
// Next photo
&--next {
z-index: 8;
transform: translate(40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 9;
transform: translate($distance, -1%) rotate($angle) scale($scale);
}
// Hover
&.hover {
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
}
}
@@ -193,7 +205,7 @@
/*
** Information
** Informations
*/
&__infos {
position: relative;
@@ -232,14 +244,14 @@
}
// States
&--prev {
&.is-prev {
transform: translateY(-$distance);
}
&--active {
&.is-active {
transform: translateY(0);
opacity: 1;
}
&--next {
&.is-next {
transform: translateY($distance);
}
@@ -312,44 +324,3 @@
}
}
}
/*
** Zoomer
*/
.zoomer {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 101;
top: 0;
right: 0;
left: 0;
bottom: 0;
&.show {
opacity: 1;
pointer-events: auto;
}
// Image
&__image {
width: 100%;
height: 100%;
overflow: auto;
img {
display: block;
height: 100%;
width: auto;
}
}
// Button
.button-control {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
}
}

4
src/style/organisms/_footer.scss
View File

@@ -38,6 +38,7 @@
@include breakpoint (sm) {
display: flex;
align-items: center;
padding-top: 6px;
}
li {
@@ -49,6 +50,7 @@
display: flex;
justify-content: center;
margin-bottom: 32px;
margin-top: 3px;
@include breakpoint (sm) {
margin-bottom: 0;
@@ -56,7 +58,7 @@
}
li {
margin: 3px 20px 0;
margin-right: 20px;
}
a {
display: block;

1
src/style/organisms/_locations.scss
View File

@@ -1,6 +1,7 @@
.browse {
margin-top: 72px;
margin-bottom: 72px;
overflow-x: hidden;
@include breakpoint (sm) {
margin-top: 120px;

6
src/style/pages/_homepage.scss
View File

@@ -50,10 +50,8 @@
}
// Photos
.gallery__photo {
&:before {
background-color: $color-secondary;
}
.gallery__picture:before {
background-color: $color-secondary;
}
}
}

1
src/style/style.scss
View File

@@ -37,6 +37,7 @@
@import "organisms/footer";
// Layouts
@import "layouts/main";
@import "layouts/explore";
// Pages

2
src/utils/AnalyticsTracker.svelte
View File

@@ -23,5 +23,7 @@
</script>
<svelte:head>
{#if process.env.NODE_ENV !== 'development'}
<script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
{/if}
</svelte:head>

36
src/utils/Transition.svelte
View File

@@ -1,6 +1,12 @@
<script>
import { stores } from '@sapper/app'
import { pageReady, animDurationLong, pageTransition } from './store'
import {
pageReady,
pageTransition,
transitionLong,
transitionPanelIn,
transitionDelay
} from './store'
const { page } = stores()
// Components
@@ -11,6 +17,9 @@
import { animateIn, animateOut } from 'animations/Transition'
// Check if path is excluded
const isExcluded = path => path.includes(['/viewer/'])
/*
** PAGE LOADING PROCESS
** 1. Set pageReady to false
@@ -24,21 +33,16 @@
let firstLoad = true
let previousPage = ''
// Check if viewer
const isExcluded = path => path.includes(['/viewer/'])
// 1. Watch page change
page.subscribe(page => {
// Run transition if page is not excluded
if (!isExcluded(previousPage) || !isExcluded(page.path)) {
// Run the loader animation (only after first load)
// Run the loader animation (first load only)
if (!firstLoad) {
animateIn(scope)
}
// TODO: Figure out how to delay the page rendering a little bit before the end of the transition panel ending
// Set pageReady to false (?)
// Reset pageReady when changing page
pageReady.set(false)
}
@@ -49,19 +53,13 @@
// 2. Watch when loaded changes
pageReady.subscribe(loaded => {
if (loaded) {
// 3. Hide the loader
setTimeout(() => {
// Also sets firstLoad to false in order to show the second icon afterwards
animateOut(scope, () => firstLoad = false)
}, 400) // This duration allows to not come over the transition In
// [OU ALORS] les pages changent la valeur de loaded plus tard
// 3. Hide the loader and set firstLoad to false (in order to show the second icon afterwards)
animateOut(scope, () => firstLoad = false)
// Scroll back to top of page
setTimeout(() => {
window.scrollTo(0,0)
}, animDurationLong * 0.75 + 400)
setTimeout(() => window.scrollTo(0,0), transitionDelay)
// 4. Run the page's transition in, but a little bit before the end of the loader
// 4. Run page entering animation
pageTransition.onAnimationEnd()
}
})
@@ -70,7 +68,7 @@
<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
<div class="transition__loader">
{#if firstLoad}
<TitleSite />
<TitleSite init="true" />
{:else}
<IconGlobe width="44" color="#fff" animated="true" />

20
src/utils/functions.js
View File

@@ -163,15 +163,17 @@ export const relativeTime = (originDate, limit = 0) => {
** Controls Anime.js parallax
*/
export const parallaxAnime = (element, anime) => {
const bound = element.getBoundingClientRect()
const windowHeight = window.innerHeight
if (bound.top < windowHeight && bound.bottom > 0) {
anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
} else {
if (bound.top >= windowHeight) {
anime.seek(0)
} else if (bound.bottom <= 0) {
anime.seek(anime.duration)
if (element) {
const bound = element.getBoundingClientRect()
const windowHeight = window.innerHeight
if (bound.top < windowHeight && bound.bottom > 0) {
anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
} else {
if (bound.top >= windowHeight) {
anime.seek(0)
} else if (bound.bottom <= 0) {
anime.seek(anime.duration)
}
}
}
}

6
src/utils/store.js
View File

@@ -35,5 +35,7 @@ export let fullscreen = writable()
/* ==========================================================================
Animation related
========================================================================== */
export const animDuration = 1400
export const animDurationLong = 1800
export const transitionDelay = 1400
export const transitionNormal = 1400
export const transitionLong = 1800
export const transitionPanelIn = 700