From 730eb7545751a1a97f3dfa3d56dd3605fd58af5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Thu, 2 Apr 2020 16:07:16 +0200 Subject: [PATCH] WIP attempt to fix page transitions, Several edits --- package.json | 4 +- pnpm-lock.yaml | 68 +++---- src/animations/Carousel.js | 69 +++---- src/animations/Locations.js | 2 +- src/animations/TitleSite.js | 12 +- src/animations/Transition.js | 65 ++++--- src/animations/index.js | 133 +++++++------ src/animations/page.js | 30 +-- src/animations/place.js | 24 +-- src/animations/viewer.js | 8 +- src/atoms/IconGlobe.svelte | 2 +- src/atoms/IconGlobeSmall.svelte | 2 +- src/atoms/TitleSite.svelte | 5 +- src/organisms/Carousel.svelte | 34 ++-- src/routes/_layout.svelte | 7 +- src/routes/credits.svelte | 4 +- src/routes/index.svelte | 7 +- src/routes/location/[country]/[place].svelte | 28 +-- src/style/atoms/_button.scss | 2 +- src/style/atoms/_icon-globe.scss | 2 +- src/style/layouts/_main.scss | 5 + src/style/organisms/_carousel.scss | 195 ++++++++----------- src/style/organisms/_footer.scss | 4 +- src/style/organisms/_locations.scss | 1 + src/style/pages/_homepage.scss | 6 +- src/style/style.scss | 1 + src/utils/AnalyticsTracker.svelte | 2 + src/utils/Transition.svelte | 36 ++-- src/utils/functions.js | 20 +- src/utils/store.js | 6 +- static/img/favicon.png | Bin 556 -> 519 bytes static/img/icons/instagram.svg | 3 - static/img/illustration.png | Bin 116378 -> 0 bytes static/img/siteicon.png | Bin 1020 -> 368 bytes 34 files changed, 386 insertions(+), 401 deletions(-) create mode 100644 src/style/layouts/_main.scss delete mode 100644 static/img/icons/instagram.svg delete mode 100644 static/img/illustration.png diff --git a/package.json b/package.json index 56e8202..173782a 100644 --- a/package.json +++ b/package.json @@ -51,12 +51,12 @@ "postcss": "^7.0.27", "postcss-load-config": "^2.1.0", "postcss-preset-env": "^6.7.0", - "rollup": "^2.3.1", + "rollup": "^2.3.2", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-eslint": "^7.0.0", "rollup-plugin-svelte": "^5.2.0", "rollup-plugin-terser": "^5.3.0", - "sapper": "^0.27.11", + "sapper": "^0.27.12", "svelte": "^3.20.1", "svelte-preprocess": "^3.7.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a8f58c1..2482113 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,10 +15,10 @@ devDependencies: '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0 '@babel/preset-env': 7.9.0_@babel+core@7.9.0 '@babel/runtime': 7.9.2 - '@rollup/plugin-alias': 3.0.1_rollup@2.3.1 - '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.1 - '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.1 - '@rollup/plugin-replace': 2.3.1_rollup@2.3.1 + '@rollup/plugin-alias': 3.0.1_rollup@2.3.2 + '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.2 + '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.2 + '@rollup/plugin-replace': 2.3.1_rollup@2.3.2 autoprefixer: 9.7.5 babel-plugin-module-resolver: 4.0.0 dotenv: 8.2.0 @@ -33,12 +33,12 @@ devDependencies: postcss: 7.0.27 postcss-load-config: 2.1.0 postcss-preset-env: 6.7.0 - rollup: 2.3.1 - rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.1 + rollup: 2.3.2 + rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.2 rollup-plugin-eslint: 7.0.0 - rollup-plugin-svelte: 5.2.0_rollup@2.3.1+svelte@3.20.1 - rollup-plugin-terser: 5.3.0_rollup@2.3.1 - sapper: 0.27.11_svelte@3.20.1 + rollup-plugin-svelte: 5.2.0_rollup@2.3.2+svelte@3.20.1 + rollup-plugin-terser: 5.3.0_rollup@2.3.2 + sapper: 0.27.12_svelte@3.20.1 svelte: 3.20.1 svelte-preprocess: 3.7.1_svelte@3.20.1 lockfileVersion: 5.1 @@ -892,23 +892,23 @@ packages: dev: false resolution: integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA== - /@rollup/plugin-alias/3.0.1_rollup@2.3.1: + /@rollup/plugin-alias/3.0.1_rollup@2.3.2: dependencies: - rollup: 2.3.1 + rollup: 2.3.2 slash: 3.0.0 dev: true peerDependencies: rollup: ^1.20.0 resolution: integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g== - /@rollup/plugin-commonjs/11.0.2_rollup@2.3.1: + /@rollup/plugin-commonjs/11.0.2_rollup@2.3.2: dependencies: - '@rollup/pluginutils': 3.0.8_rollup@2.3.1 + '@rollup/pluginutils': 3.0.8_rollup@2.3.2 estree-walker: 1.0.1 is-reference: 1.1.4 magic-string: 0.25.7 resolve: 1.15.1 - rollup: 2.3.1 + rollup: 2.3.2 dev: true engines: node: '>= 8.0.0' @@ -916,14 +916,14 @@ packages: rollup: ^1.20.0 resolution: integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g== - /@rollup/plugin-node-resolve/7.1.1_rollup@2.3.1: + /@rollup/plugin-node-resolve/7.1.1_rollup@2.3.2: dependencies: - '@rollup/pluginutils': 3.0.8_rollup@2.3.1 + '@rollup/pluginutils': 3.0.8_rollup@2.3.2 '@types/resolve': 0.0.8 builtin-modules: 3.1.0 is-module: 1.0.0 resolve: 1.15.1 - rollup: 2.3.1 + rollup: 2.3.2 dev: true engines: node: '>= 8.0.0' @@ -931,20 +931,20 @@ packages: rollup: ^1.20.0 resolution: integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA== - /@rollup/plugin-replace/2.3.1_rollup@2.3.1: + /@rollup/plugin-replace/2.3.1_rollup@2.3.2: dependencies: - '@rollup/pluginutils': 3.0.8_rollup@2.3.1 + '@rollup/pluginutils': 3.0.8_rollup@2.3.2 magic-string: 0.25.7 - rollup: 2.3.1 + rollup: 2.3.2 dev: true peerDependencies: rollup: ^1.20.0 resolution: integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A== - /@rollup/pluginutils/3.0.8_rollup@2.3.1: + /@rollup/pluginutils/3.0.8_rollup@2.3.2: dependencies: estree-walker: 1.0.1 - rollup: 2.3.1 + rollup: 2.3.2 dev: true engines: node: '>= 8.0.0' @@ -3792,11 +3792,11 @@ packages: hasBin: true resolution: integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== - /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.1: + /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.2: dependencies: '@babel/core': 7.9.0 '@babel/helper-module-imports': 7.8.3 - rollup: 2.3.1 + rollup: 2.3.2 rollup-pluginutils: 2.8.2 dev: true peerDependencies: @@ -3811,10 +3811,10 @@ packages: dev: true resolution: integrity: sha512-u35kXiY11ULeNQGTlRkYx7uGJ/hS/Dx3wj8f9YVC3oMLTGU9fOqQJsAKYtBFZU3gJ8Vt3gu8ppB1vnKl+7gatQ== - /rollup-plugin-svelte/5.2.0_rollup@2.3.1+svelte@3.20.1: + /rollup-plugin-svelte/5.2.0_rollup@2.3.2+svelte@3.20.1: dependencies: require-relative: 0.8.7 - rollup: 2.3.1 + rollup: 2.3.2 rollup-pluginutils: 2.8.2 sourcemap-codec: 1.4.8 svelte: 3.20.1 @@ -3824,11 +3824,11 @@ packages: svelte: '*' resolution: integrity: sha512-6B7gRsJC/rS/ATEy3J51McsNgNcDFibRQ/L3rHsDMUYeCDCm3dsw3KEqf3WaxX0ZdApzZ1XWcnTXGQlwVPYpnQ== - /rollup-plugin-terser/5.3.0_rollup@2.3.1: + /rollup-plugin-terser/5.3.0_rollup@2.3.2: dependencies: '@babel/code-frame': 7.8.3 jest-worker: 24.9.0 - rollup: 2.3.1 + rollup: 2.3.2 rollup-pluginutils: 2.8.2 serialize-javascript: 2.1.2 terser: 4.6.7 @@ -3843,7 +3843,7 @@ packages: dev: true resolution: integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== - /rollup/2.3.1: + /rollup/2.3.2: dev: true engines: node: '>=10.0.0' @@ -3851,7 +3851,7 @@ packages: optionalDependencies: fsevents: 2.1.2 resolution: - integrity: sha512-BRjzOauORe+R0U0I6SkMTSG22nYmtztR/TaBl0SvbXgc3VAxBDrZoB6HROiK0S5px1pUBnLnjBkbzmVuwC9Q1Q== + integrity: sha512-p66+fbfaUUOGE84sHXAOgfeaYQMslgAazoQMp//nlR519R61213EPFgrMZa48j31jNacJwexSAR1Q8V/BwGKBA== /run-async/2.4.0: dependencies: is-promise: 2.1.0 @@ -3879,7 +3879,7 @@ packages: dev: true resolution: integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== - /sapper/0.27.11_svelte@3.20.1: + /sapper/0.27.12_svelte@3.20.1: dependencies: html-minifier: 4.0.0 http-link-header: 1.0.2 @@ -3892,7 +3892,7 @@ packages: peerDependencies: svelte: ^3.5.0 resolution: - integrity: sha512-5EaPZhlc8OnyN3UCI6dRSM1Gz5sxyzLZG/1z5nMvZhg9Ng+rSvEvJx/rW/tSHcnQPa8or7+YcbfvQHKS5oPHiw== + integrity: sha512-xTvPQMb9L3J34Jd+6jSFeiuT8eQZ2D5TXPeJI9VO7h8t5nB2w78ZNQ4IlEPHsCMT2LZNLozygTb2plE4qH2XeQ== /sass-graph/2.2.4: dependencies: glob: 7.1.6 @@ -4555,12 +4555,12 @@ specifiers: postcss: ^7.0.27 postcss-load-config: ^2.1.0 postcss-preset-env: ^6.7.0 - rollup: ^2.3.1 + rollup: ^2.3.2 rollup-plugin-babel: ^4.4.0 rollup-plugin-eslint: ^7.0.0 rollup-plugin-svelte: ^5.2.0 rollup-plugin-terser: ^5.3.0 - sapper: ^0.27.11 + sapper: ^0.27.12 scroll-out: ^2.2.8 sirv: ^0.4.2 svelte: ^3.20.1 diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index b177c8e..38dfe9d 100644 --- a/src/animations/Carousel.js +++ b/src/animations/Carousel.js @@ -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() }) } \ No newline at end of file diff --git a/src/animations/Locations.js b/src/animations/Locations.js index 6fa5090..c5c177c 100644 --- a/src/animations/Locations.js +++ b/src/animations/Locations.js @@ -1,6 +1,6 @@ import anime from 'animejs' import ScrollOut from 'scroll-out' -import { animDuration } from 'utils/store' +import { transitionLong } from 'utils/store' /* diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js index ecab523..451374e 100644 --- a/src/animations/TitleSite.js +++ b/src/animations/TitleSite.js @@ -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' }) diff --git a/src/animations/Transition.js b/src/animations/Transition.js index fb0e9c3..de51129 100644 --- a/src/animations/Transition.js +++ b/src/animations/Transition.js @@ -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() } diff --git a/src/animations/index.js b/src/animations/index.js index edbe674..5502244 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -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' }) } diff --git a/src/animations/page.js b/src/animations/page.js index 4070588..79fedba 100644 --- a/src/animations/page.js +++ b/src/animations/page.js @@ -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 }), }) + // } + // }) } diff --git a/src/animations/place.js b/src/animations/place.js index 809fcda..3371e16 100644 --- a/src/animations/place.js +++ b/src/animations/place.js @@ -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() diff --git a/src/animations/viewer.js b/src/animations/viewer.js index ec3a3c4..ec8fd57 100644 --- a/src/animations/viewer.js +++ b/src/animations/viewer.js @@ -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' }) diff --git a/src/atoms/IconGlobe.svelte b/src/atoms/IconGlobe.svelte index 5468d29..1492e52 100644 --- a/src/atoms/IconGlobe.svelte +++ b/src/atoms/IconGlobe.svelte @@ -15,7 +15,7 @@ diff --git a/src/atoms/IconGlobeSmall.svelte b/src/atoms/IconGlobeSmall.svelte index f2567a8..5ec807d 100644 --- a/src/atoms/IconGlobeSmall.svelte +++ b/src/atoms/IconGlobeSmall.svelte @@ -15,7 +15,7 @@ diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte index ae5efb6..f7becb1 100644 --- a/src/atoms/TitleSite.svelte +++ b/src/atoms/TitleSite.svelte @@ -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) }) diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index 3e3e7a5..33722b3 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -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 @@ -{#if photos.length} +{#if photos}
swipe(event.detail.directions)} @@ -143,18 +143,20 @@
{#each photos as { id, name, location, image }, index} - - - - - - {name}, {location.name}, {location.country.name} - + + + + + + {name}, {location.name}, {location.country.name} + +
{/each}
@@ -189,9 +191,9 @@
{#each photos as { id, name, location }, index}

{name}

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index 01750a9..551cd3a 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -70,7 +70,8 @@ site, continents, countries, - locations + locations, + pageReady } from 'utils/store' // Components @@ -106,7 +107,9 @@ - +

+ +
{#if process.env.CONFIG.TRANSITION === 'true'} diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte index 6879818..28ef218 100644 --- a/src/routes/credits.svelte +++ b/src/routes/credits.svelte @@ -75,9 +75,9 @@ {/each}
{/if} - -
+ +
diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 510fc1b..104e5b1 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -24,7 +24,7 @@ - {$site.seo_name} – Beautiful houses of {location.name}, {location.country.name} - + {$site.seo_name} – Beautiful houses of {location.name}, {country.name} + @@ -135,17 +137,17 @@

{$site.description}

- {#if location.description} + {#if description}

Houses Of - {location.description} + {description}

{/if} - {#if photos.length} + {#if photos}

Updated @@ -157,9 +159,9 @@

- {#if location.illustration_desktop && location.illustration_mobile} + {#if illustration_desktop && illustration_mobile}
{/if} @@ -169,7 +171,7 @@
- {#if photos.length} + {#if photos}
{#each paginatedPhotos as photo, index} + {#if process.env.NODE_ENV !== 'development'} + {/if} diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte index cf41d95..bb9afd0 100644 --- a/src/utils/Transition.svelte +++ b/src/utils/Transition.svelte @@ -1,6 +1,12 @@