From 58adc052c4fa4d85e7abf8a263f83055bb3cf6c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 30 Mar 2020 17:43:32 +0200 Subject: [PATCH] Photo transition: Wait for image to be loaded --- package.json | 6 ++-- pnpm-lock.yaml | 68 +++++++++++++++++++------------------- src/animations/Photo.js | 19 ++++++----- src/atoms/TitleSite.svelte | 2 +- src/routes/_layout.svelte | 3 +- 5 files changed, 50 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index b7ce261..9a51ca5 100644 --- a/package.json +++ b/package.json @@ -50,14 +50,14 @@ "postcss": "^7.0.27", "postcss-load-config": "^2.1.0", "postcss-preset-env": "^6.7.0", - "rollup": "^2.2.0", + "rollup": "^2.3.0", "rollup-plugin-babel": "^4.4.0", "rollup-plugin-eslint": "^7.0.0", - "rollup-plugin-svelte": "^5.1.1", + "rollup-plugin-svelte": "^5.2.0", "rollup-plugin-terser": "^5.3.0", "sapper": "^0.27.11", "svelte": "^3.20.1", - "svelte-preprocess": "^3.6.0" + "svelte-preprocess": "^3.7.1" }, "browserslist": [ "> 0.5%", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3037cfa..ccd962c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,9 +15,9 @@ 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-commonjs': 11.0.2_rollup@2.2.0 - '@rollup/plugin-node-resolve': 7.1.1_rollup@2.2.0 - '@rollup/plugin-replace': 2.3.1_rollup@2.2.0 + '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.0 + '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.0 + '@rollup/plugin-replace': 2.3.1_rollup@2.3.0 autoprefixer: 9.7.5 babel-plugin-module-resolver: 4.0.0 dotenv: 8.2.0 @@ -32,14 +32,14 @@ devDependencies: postcss: 7.0.27 postcss-load-config: 2.1.0 postcss-preset-env: 6.7.0 - rollup: 2.2.0 - rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.2.0 + rollup: 2.3.0 + rollup-plugin-babel: 4.4.0_@babel+core@7.9.0+rollup@2.3.0 rollup-plugin-eslint: 7.0.0 - rollup-plugin-svelte: 5.1.1_rollup@2.2.0+svelte@3.20.1 - rollup-plugin-terser: 5.3.0_rollup@2.2.0 + rollup-plugin-svelte: 5.2.0_rollup@2.3.0+svelte@3.20.1 + rollup-plugin-terser: 5.3.0_rollup@2.3.0 sapper: 0.27.11_svelte@3.20.1 svelte: 3.20.1 - svelte-preprocess: 3.6.0_svelte@3.20.1 + svelte-preprocess: 3.7.1_svelte@3.20.1 lockfileVersion: 5.1 packages: /@babel/code-frame/7.8.3: @@ -891,14 +891,14 @@ packages: dev: false resolution: integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA== - /@rollup/plugin-commonjs/11.0.2_rollup@2.2.0: + /@rollup/plugin-commonjs/11.0.2_rollup@2.3.0: dependencies: - '@rollup/pluginutils': 3.0.8_rollup@2.2.0 + '@rollup/pluginutils': 3.0.8_rollup@2.3.0 estree-walker: 1.0.1 is-reference: 1.1.4 magic-string: 0.25.7 resolve: 1.15.1 - rollup: 2.2.0 + rollup: 2.3.0 dev: true engines: node: '>= 8.0.0' @@ -906,14 +906,14 @@ packages: rollup: ^1.20.0 resolution: integrity: sha512-MPYGZr0qdbV5zZj8/2AuomVpnRVXRU5XKXb3HVniwRoRCreGlf5kOE081isNWeiLIi6IYkwTX9zE0/c7V8g81g== - /@rollup/plugin-node-resolve/7.1.1_rollup@2.2.0: + /@rollup/plugin-node-resolve/7.1.1_rollup@2.3.0: dependencies: - '@rollup/pluginutils': 3.0.8_rollup@2.2.0 + '@rollup/pluginutils': 3.0.8_rollup@2.3.0 '@types/resolve': 0.0.8 builtin-modules: 3.1.0 is-module: 1.0.0 resolve: 1.15.1 - rollup: 2.2.0 + rollup: 2.3.0 dev: true engines: node: '>= 8.0.0' @@ -921,20 +921,20 @@ packages: rollup: ^1.20.0 resolution: integrity: sha512-14ddhD7TnemeHE97a4rLOhobfYvUVcaYuqTnL8Ti7Jxi9V9Jr5LY7Gko4HZ5k4h4vqQM0gBQt6tsp9xXW94WPA== - /@rollup/plugin-replace/2.3.1_rollup@2.2.0: + /@rollup/plugin-replace/2.3.1_rollup@2.3.0: dependencies: - '@rollup/pluginutils': 3.0.8_rollup@2.2.0 + '@rollup/pluginutils': 3.0.8_rollup@2.3.0 magic-string: 0.25.7 - rollup: 2.2.0 + rollup: 2.3.0 dev: true peerDependencies: rollup: ^1.20.0 resolution: integrity: sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A== - /@rollup/pluginutils/3.0.8_rollup@2.2.0: + /@rollup/pluginutils/3.0.8_rollup@2.3.0: dependencies: estree-walker: 1.0.1 - rollup: 2.2.0 + rollup: 2.3.0 dev: true engines: node: '>= 8.0.0' @@ -3782,11 +3782,11 @@ packages: hasBin: true resolution: integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== - /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.2.0: + /rollup-plugin-babel/4.4.0_@babel+core@7.9.0+rollup@2.3.0: dependencies: '@babel/core': 7.9.0 '@babel/helper-module-imports': 7.8.3 - rollup: 2.2.0 + rollup: 2.3.0 rollup-pluginutils: 2.8.2 dev: true peerDependencies: @@ -3801,24 +3801,24 @@ packages: dev: true resolution: integrity: sha512-u35kXiY11ULeNQGTlRkYx7uGJ/hS/Dx3wj8f9YVC3oMLTGU9fOqQJsAKYtBFZU3gJ8Vt3gu8ppB1vnKl+7gatQ== - /rollup-plugin-svelte/5.1.1_rollup@2.2.0+svelte@3.20.1: + /rollup-plugin-svelte/5.2.0_rollup@2.3.0+svelte@3.20.1: dependencies: require-relative: 0.8.7 - rollup: 2.2.0 + rollup: 2.3.0 rollup-pluginutils: 2.8.2 sourcemap-codec: 1.4.8 svelte: 3.20.1 dev: true peerDependencies: - rollup: '>=0.60.0' + rollup: '>=2.3.0' svelte: '*' resolution: - integrity: sha512-wP3CnKHjR4fZUgNm5Iey7eItnxwnH/nAw568WJ8dpMSchBxxZ/DmKSx8e6h8k/B6SwG1wfGvWehadFJHcuFFSw== - /rollup-plugin-terser/5.3.0_rollup@2.2.0: + integrity: sha512-6B7gRsJC/rS/ATEy3J51McsNgNcDFibRQ/L3rHsDMUYeCDCm3dsw3KEqf3WaxX0ZdApzZ1XWcnTXGQlwVPYpnQ== + /rollup-plugin-terser/5.3.0_rollup@2.3.0: dependencies: '@babel/code-frame': 7.8.3 jest-worker: 24.9.0 - rollup: 2.2.0 + rollup: 2.3.0 rollup-pluginutils: 2.8.2 serialize-javascript: 2.1.2 terser: 4.6.7 @@ -3833,7 +3833,7 @@ packages: dev: true resolution: integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== - /rollup/2.2.0: + /rollup/2.3.0: dev: true engines: node: '>=10.0.0' @@ -3841,7 +3841,7 @@ packages: optionalDependencies: fsevents: 2.1.2 resolution: - integrity: sha512-iAu/j9/WJ0i+zT0sAMuQnsEbmOKzdQ4Yxu5rbPs9aUCyqveI1Kw3H4Fi9NWfCOpb8luEySD2lDyFWL9CrLE8iw== + integrity: sha512-nIq2Z9YwNbEfqTlAXe/tVl8CwUsjX/8Q5Jxlx+JRoYCu5keKLc6k0zyt11sM6WtCDxhmmJEIosFy9y26ZFRx6w== /run-async/2.4.0: dependencies: is-promise: 2.1.0 @@ -4202,7 +4202,7 @@ packages: node: '>=8' resolution: integrity: sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== - /svelte-preprocess/3.6.0_svelte@3.20.1: + /svelte-preprocess/3.7.1_svelte@3.20.1: dependencies: '@types/pug': 2.0.4 '@types/sass': 1.16.0 @@ -4216,7 +4216,7 @@ packages: svelte: ^3.18.1 requiresBuild: true resolution: - integrity: sha512-1mWRv4WKY6xRQFxnqqXRvt2KYcPdT1qTYwIdsv66gVpSJxeUmPMaX/OkYp45pPxMOzeM976KtZ8+xw9lMamvDQ== + integrity: sha512-7Padl2rCwQAakLGnNhk52NJw4eUJHs+q432rRvcCs/Ul7pKoSoZ69HCptXTH8ChjRFl1hqrVsLVYu7wGvYgR1A== /svelte/3.20.1: dev: true engines: @@ -4538,15 +4538,15 @@ specifiers: postcss: ^7.0.27 postcss-load-config: ^2.1.0 postcss-preset-env: ^6.7.0 - rollup: ^2.2.0 + rollup: ^2.3.0 rollup-plugin-babel: ^4.4.0 rollup-plugin-eslint: ^7.0.0 - rollup-plugin-svelte: ^5.1.1 + rollup-plugin-svelte: ^5.2.0 rollup-plugin-terser: ^5.3.0 sapper: ^0.27.11 scroll-out: ^2.2.8 sirv: ^0.4.2 svelte: ^3.20.1 - svelte-preprocess: ^3.6.0 + svelte-preprocess: ^3.7.1 swipe-listener: ^1.1.0 zenscroll: ^4.0.2 diff --git a/src/animations/Photo.js b/src/animations/Photo.js index a900a19..8ef4226 100644 --- a/src/animations/Photo.js +++ b/src/animations/Photo.js @@ -1,5 +1,6 @@ import anime from 'animejs' import ScrollOut from 'scroll-out' +import imagesLoaded from 'imagesloaded' import { animDuration, animDurationLong } from '../utils/store' import { throttle, parallaxAnime } from '../utils/functions' @@ -29,14 +30,16 @@ export const animateIn = scope => { once: true, targets: scope.querySelector('picture'), onShown (el) { - // Title reveal - anime({ - targets: el.querySelector('img'), - scale: [1.12, 1], - opacity: [0, 1], - duration: 2000, - delay: 50, - easing: 'easeOutQuart' + // Load the photo then reveal it + imagesLoaded(el, instance => { + anime({ + targets: el.querySelector('img'), + scale: [1.12, 1], + opacity: [0, 1], + duration: 2000, + delay: 50, + easing: 'easeOutQuart' + }) }) } }) diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte index d4f9d59..e0325fe 100644 --- a/src/atoms/TitleSite.svelte +++ b/src/atoms/TitleSite.svelte @@ -3,7 +3,7 @@ import { charsToSpan } from '../utils/functions' // Animations - import { animateIn } from '../animations/TitleSite.js' + import { animateIn } from '../animations/TitleSite' // Variables let scope diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index 9d3a710..90d04f7 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -77,8 +77,7 @@ import Transition from '../utils/Transition' import AnalyticsTracker from '../utils/AnalyticsTracker' - // Props and variables - export const segment = null + // Variables const { page } = stores()