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

Photo transition: Wait for image to be loaded
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-03-30 17:43:32 +02:00
parent 0767e95520
commit 58adc052c4
5 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -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%",

68
pnpm-lock.yaml generated
View File

@@ -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

19
src/animations/Photo.js
View File

@@ -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'
})
})
}
})

2
src/atoms/TitleSite.svelte
View File

@@ -3,7 +3,7 @@
import { charsToSpan } from '../utils/functions'
// Animations
import { animateIn } from '../animations/TitleSite.js'
import { animateIn } from '../animations/TitleSite'
// Variables
let scope

3
src/routes/_layout.svelte
View File

@@ -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()