Performances optimizations WIP

package.json

@@ -24,6 +24,7 @@
     "polka": "^1.0.0-next.9",
     "scroll-out": "^2.2.8",
     "sirv": "^0.4.2",
+    "svelte-lazy": "^0.1.10",
     "swipe-listener": "^1.1.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -7,6 +7,7 @@ dependencies:
   polka: 1.0.0-next.11
   scroll-out: 2.2.8
   sirv: 0.4.2
+  svelte-lazy: 0.1.10
   swipe-listener: 1.1.0
 devDependencies:
   '@babel/core': 7.9.0
@@ -72,7 +73,7 @@ packages:
       gensync: 1.0.0-beta.1
       json5: 2.1.3
       lodash: 4.17.15
-      resolve: 1.15.1
+      resolve: 1.16.0
       semver: 5.7.1
       source-map: 0.5.7
     dev: true
@@ -698,7 +699,7 @@ packages:
       '@babel/core': 7.9.0
       '@babel/helper-module-imports': 7.8.3
       '@babel/helper-plugin-utils': 7.8.3
-      resolve: 1.15.1
+      resolve: 1.16.0
       semver: 5.7.1
     dev: true
     peerDependencies:
@@ -917,7 +918,7 @@ packages:
       estree-walker: 1.0.1
       is-reference: 1.1.4
       magic-string: 0.25.7
-      resolve: 1.15.1
+      resolve: 1.16.0
       rollup: 2.6.1
     dev: true
     engines:
@@ -932,7 +933,7 @@ packages:
       '@types/resolve': 0.0.8
       builtin-modules: 3.1.0
       is-module: 1.0.0
-      resolve: 1.15.1
+      resolve: 1.16.0
       rollup: 2.6.1
     dev: true
     engines:
@@ -1159,7 +1160,7 @@ packages:
   /autoprefixer/9.7.6:
     dependencies:
       browserslist: 4.11.1
-      caniuse-lite: 1.0.30001040
+      caniuse-lite: 1.0.30001042
       chalk: 2.4.2
       normalize-range: 0.1.2
       num2fraction: 1.2.2
@@ -1191,7 +1192,7 @@ packages:
       glob: 7.1.6
       pkg-up: 3.1.0
       reselect: 4.0.0
-      resolve: 1.15.1
+      resolve: 1.16.0
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -1239,8 +1240,8 @@ packages:
       integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   /browserslist/4.11.1:
     dependencies:
-      caniuse-lite: 1.0.30001040
+      caniuse-lite: 1.0.30001042
-      electron-to-chromium: 1.3.403
+      electron-to-chromium: 1.3.412
       node-releases: 1.1.53
       pkg-up: 2.0.0
     dev: true
@@ -1319,10 +1320,10 @@ packages:
       node: '>=0.10.0'
     resolution:
       integrity: sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
-  /caniuse-lite/1.0.30001040:
+  /caniuse-lite/1.0.30001042:
     dev: true
     resolution:
-      integrity: sha512-Ep0tEPeI5wCvmJNrXjE3etgfI+lkl1fTDU6Y3ZH1mhrjkPlVI9W4pcKbMo+BQLpEWKVYYp2EmYaRsqpPC3k7lQ==
+      integrity: sha512-igMQ4dlqnf4tWv0xjaaE02op9AJ2oQzXKjWf4EuAHFN694Uo9/EfPVIPJcmn2WkU9RqozCxx5e2KPcVClHDbDw==
   /caseless/0.12.0:
     dev: true
     resolution:
@@ -1378,10 +1379,10 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  /cli-width/2.2.0:
+  /cli-width/2.2.1:
     dev: true
     resolution:
-      integrity: sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
+      integrity: sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
   /cliui/3.2.0:
     dependencies:
       string-width: 1.0.2
@@ -1670,10 +1671,10 @@ packages:
     dev: true
     resolution:
       integrity: sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  /electron-to-chromium/1.3.403:
+  /electron-to-chromium/1.3.412:
     dev: true
     resolution:
-      integrity: sha512-JaoxV4RzdBAZOnsF4dAlZ2ijJW72MbqO5lNfOBHUWiBQl3Rwe+mk2RCUMrRI3rSClLJ8HSNQNqcry12H+0ZjFw==
+      integrity: sha512-4bVdSeJScR8fT7ERveLWbxemY5uXEHVseqMRyORosiKcTUSGtVwBkV8uLjXCqoFLeImA57Z9hbz3TOid01U4Hw==
   /emoji-regex/7.0.3:
     dev: true
     resolution:
@@ -1760,7 +1761,7 @@ packages:
   /eslint-import-resolver-node/0.3.3:
     dependencies:
       debug: 2.6.9
-      resolve: 1.15.1
+      resolve: 1.16.0
     dev: true
     resolution:
       integrity: sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==
@@ -1797,7 +1798,7 @@ packages:
       minimatch: 3.0.4
       object.values: 1.1.1
       read-pkg-up: 2.0.0
-      resolve: 1.15.1
+      resolve: 1.16.0
     dev: true
     engines:
       node: '>=4'
@@ -1811,7 +1812,7 @@ packages:
       eslint-utils: 2.0.0
       ignore: 5.1.4
       minimatch: 3.0.4
-      resolve: 1.15.1
+      resolve: 1.16.0
       semver: 6.3.0
     dev: true
     engines:
@@ -1884,7 +1885,7 @@ packages:
       eslint-utils: 1.4.3
       eslint-visitor-keys: 1.1.0
       espree: 6.2.1
-      esquery: 1.2.0
+      esquery: 1.3.1
       esutils: 2.0.3
       file-entry-cache: 5.0.1
       functional-red-black-tree: 1.0.1
@@ -1934,14 +1935,14 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-  /esquery/1.2.0:
+  /esquery/1.3.1:
     dependencies:
-      estraverse: 5.0.0
+      estraverse: 5.1.0
     dev: true
     engines:
-      node: '>=8.0'
+      node: '>=0.10'
     resolution:
-      integrity: sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==
+      integrity: sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   /esrecurse/4.2.1:
     dependencies:
       estraverse: 4.3.0
@@ -1956,12 +1957,12 @@ packages:
       node: '>=4.0'
     resolution:
       integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-  /estraverse/5.0.0:
+  /estraverse/5.1.0:
     dev: true
     engines:
       node: '>=4.0'
     resolution:
-      integrity: sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A==
+      integrity: sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
   /estree-walker/0.6.1:
     dev: true
     resolution:
@@ -2336,7 +2337,7 @@ packages:
       graceful-fs: 4.2.3
       inherits: 2.0.4
       map-limit: 0.0.1
-      resolve: 1.15.1
+      resolve: 1.16.0
     dev: true
     resolution:
       integrity: sha512-Ogm179MCazwIRyEqs3g3EOY4Y3XIAa0yl8J5RE9rJC6QH1w8weVOp2RZu0mvnYy/2xIas1w166YR2eZdDkWQxg==
@@ -2352,7 +2353,7 @@ packages:
       glslify-bundle: 5.1.1
       glslify-deps: 1.3.1
       minimist: 1.2.5
-      resolve: 1.15.1
+      resolve: 1.16.0
       stack-trace: 0.0.9
       static-eval: 2.0.5
       through2: 2.0.5
@@ -2435,7 +2436,7 @@ packages:
       he: 1.2.0
       param-case: 2.1.1
       relateurl: 0.2.7
-      uglify-js: 3.8.1
+      uglify-js: 3.9.1
     dev: true
     engines:
       node: '>=6'
@@ -2558,7 +2559,7 @@ packages:
       ansi-escapes: 4.3.1
       chalk: 3.0.0
       cli-cursor: 3.1.0
-      cli-width: 2.2.0
+      cli-width: 2.2.1
       external-editor: 3.1.0
       figures: 3.2.0
       lodash: 4.17.15
@@ -3128,7 +3129,7 @@ packages:
   /normalize-package-data/2.5.0:
     dependencies:
       hosted-git-info: 2.8.8
-      resolve: 1.15.1
+      resolve: 1.16.0
       semver: 5.7.1
       validate-npm-package-license: 3.0.4
     dev: true
@@ -3680,7 +3681,7 @@ packages:
     dependencies:
       autoprefixer: 9.7.6
       browserslist: 4.11.1
-      caniuse-lite: 1.0.30001040
+      caniuse-lite: 1.0.30001042
       css-blank-pseudo: 0.1.4
       css-has-pseudo: 0.10.0
       css-prefers-color-scheme: 3.1.1
@@ -4044,12 +4045,12 @@ packages:
     dev: true
     resolution:
       integrity: sha1-3ZV5gufnNt699TtYpN2RdUV13UY=
-  /resolve/1.15.1:
+  /resolve/1.16.0:
     dependencies:
       path-parse: 1.0.6
     dev: true
     resolution:
-      integrity: sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
+      integrity: sha512-LarL/PIKJvc09k1jaeT4kQb/8/7P+qV4qSnN2K80AES+OHdfZELAKVOBjxsvtToT/uLOfFbvYvKfZmV8cee7nA==
   /restore-cursor/3.1.0:
     dependencies:
       onetime: 5.1.0
@@ -4544,6 +4545,10 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  /svelte-lazy/0.1.10:
+    dev: false
+    resolution:
+      integrity: sha512-3MobAvIUe345ZNREDvy/3tsfZMzPcSW+fE7osCVtGOAFeQ25haqQoZhT2c6qxxnWB7oVlTXTHCfEatzAGJi0fQ==
   /svelte-preprocess/3.7.1_svelte@3.20.1:
     dependencies:
       '@types/pug': 2.0.4
@@ -4710,16 +4715,15 @@ packages:
     dev: true
     resolution:
       integrity: sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
-  /uglify-js/3.8.1:
+  /uglify-js/3.9.1:
     dependencies:
       commander: 2.20.3
-      source-map: 0.6.1
     dev: true
     engines:
       node: '>=0.8.0'
     hasBin: true
     resolution:
-      integrity: sha512-W7KxyzeaQmZvUFbGj4+YFshhVrMBGSg2IbcYAjGWGvx8DHvJMclbTDMpffdxFUGPBHjIytk7KJUR/KUXstUGDw==
+      integrity: sha512-JUPoL1jHsc9fOjVFHdQIhqEEJsQvfKDjlubcCilu8U26uZ73qOg8VsN8O1jbuei44ZPlwL7kmbAdM4tzaUvqnA==
   /unicode-canonical-property-names-ecmascript/1.0.4:
     dev: true
     engines:
@@ -4925,5 +4929,6 @@ specifiers:
   scroll-out: ^2.2.8
   sirv: ^0.4.2
   svelte: ^3.20.1
+  svelte-lazy: ^0.1.10
   svelte-preprocess: ^3.7.1
   swipe-listener: ^1.1.0

rollup.config.js

@@ -130,21 +130,21 @@ export default {
     /*
     ** Service worker
     */
-    ...(!dev && {
+    // ...(!dev && {
-        serviceworker: {
+    //     serviceworker: {
-            input: sapperConfig.serviceworker.input(),
+    //         input: sapperConfig.serviceworker.input(),
-            output: sapperConfig.serviceworker.output(),
+    //         output: sapperConfig.serviceworker.output(),
-            plugins: [
+    //         plugins: [
-                resolve(),
+    //             resolve(),
-            aliases,
+    //         aliases,
-                replace({
+    //             replace({
-                    'process.browser': true,
+    //                 'process.browser': true,
-                    ...replaceOptions
+    //                 ...replaceOptions
-                }),
+    //             }),
-                commonjs(),
+    //             commonjs(),
-                !dev && terser()
+    //             !dev && terser()
-            ],
+    //         ],
-            onwarn,
+    //         onwarn,
-        }
+    //     }
-    })
+    // })
 }

src/animations/place.js

@@ -40,8 +40,7 @@ export const animateIn = () => {
     // Illustration
     tl.add({
         targets: '.place__illustration',
-        scale: [1.1, 1],
+        scale: [1.05, 1],
-        translateX: ['-50%', '-50%'],
         translateZ: [0, 0],
         opacity: [0, 1]
     }, 0)

src/molecules/InteractiveGlobe.svelte

@@ -22,30 +22,32 @@
     ** Run code when mounted
     */
     onMount(async () => {
-        // Import libraries and code
         let InteractiveGlobe
-        await import('globe/index').then(module => InteractiveGlobe = module.default)
+        if (process.browser) {
-        // Init the globe from library
+            // Import libraries and code
-        globe = new InteractiveGlobe({
+            await import('globe/index').then(module => InteractiveGlobe = module.default)
-            el: scope,
+            // Init the globe from library
-            texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`,
+            globe = new InteractiveGlobe({
-            markers: [...$locations.map(location => {
+                el: scope,
-                return {
+                texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`,
-                    name: location.name,
+                markers: [...$locations.map(location => {
-                    slug: location.slug,
+                    return {
-                    countryName: location.country.name,
+                        name: location.name,
-                    countrySlug: location.country.slug,
+                        slug: location.slug,
-                    lat: location.coordinates.lat,
+                        countryName: location.country.name,
-                    lng: location.coordinates.lng
+                        countrySlug: location.country.slug,
-                }
+                        lat: location.coordinates.lat,
-            })],
+                        lng: location.coordinates.lng
-            cameraDistance: 3,
+                    }
-            onLinkClicked: () => {}
+                })],
-        })
+                cameraDistance: 3,
+                onLinkClicked: () => {}
+            })
 
-        // Run the globe
+            // Run the globe
-        resize()
+            resize()
-        update()
+            update()
+        }
     })
 </script>
 

src/routes/_error.svelte

@@ -26,22 +26,24 @@
 </div>
 {/if}
 
-<section class="page">
+<main class="housesof" class:is-transitioning={!$pageReady}>
-    <div class="wrap">
+    <section class="page">
-        <div class="page__top">
+        <div class="wrap">
-            <a href="/" class="button-control button-control--pink dir-left">
+            <div class="page__top">
-                <IconArrow direction="left" color="#fff" class="icon" />
+                <a href="/" class="button-control button-control--pink dir-left">
-                <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+                    <IconArrow direction="left" color="#fff" class="icon" />
-            </a>
+                    <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
+                </a>
 
-            <TitleSite />
+                <TitleSite />
+            </div>
+
+            <div class="page__description style-description">
+                <p>Oh no… Looks like something wrong just happened. Like a nasty error {status}.</p>
+                <Button href="/" class="button" text="Go back to homepage" />
+            </div>
         </div>
 
-        <div class="page__description style-description">
+        <Footer />
-            <p>Oh no… Looks like something wrong just happened. Like a nasty error {status}.</p>
+    </section>
-            <Button href="/" class="button" text="Go back to homepage" />
+</main>
-        </div>
-    </div>
-
-    <Footer />
-</section>

src/routes/_layout.svelte

@@ -144,9 +144,7 @@
     {/each}
 </svelte:head>
 
-<main class="housesof" class:is-transitioning={!$pageReady}>
+<slot></slot>
-    <slot></slot>
-</main>
 
 <Transition />
 

src/routes/choose.svelte

@@ -5,7 +5,8 @@
         site,
         currentLocation,
         currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
     } from 'utils/store'
     // Components
     import IconArrow from 'atoms/IconArrow'
@@ -20,6 +21,7 @@
 
     // Variables
     const { page } = stores()
+    pageAnimation.set(animateIn)
 
     // Reset current location
     currentLocation.set()
@@ -46,7 +48,7 @@
     />
 </svelte:head>
 
-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="page explore">
         <div class="wrap">
             <div class="page__top">
@@ -69,4 +71,4 @@
     </section>
 
     <Footer />
-</Transition>
+</main>

src/routes/credits.svelte

@@ -9,12 +9,12 @@
     import InteractiveGlobe from 'molecules/InteractiveGlobe'
     import Footer from 'organisms/Footer'
     import SocialMetas from 'utils/SocialMetas'
-    import Transition from 'utils/Transition'
     // Animations
     import { animateIn } from 'animations/page'
 
     // Variables
     const { page } = stores()
+    pageAnimation.set(animateIn)
 
 
     /*
@@ -37,7 +37,7 @@
     />
 </svelte:head>
 
-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="page">
         <div class="wrap">
             <div class="page__top">
@@ -80,4 +80,4 @@
 
         <Footer />
     </section>
-</Transition>
+</main>

src/routes/index.svelte

@@ -29,32 +29,29 @@
         site,
         currentLocation,
         currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
     } from 'utils/store'
     import { charsToSpan, smoothScroll } from 'utils/functions'
     // Dependencies
-    import ScrollOut from 'scroll-out'
+    import Lazy from 'svelte-lazy'
     // Components
     import Button from 'atoms/Button'
     import IconGlobeSmall from 'atoms/IconGlobeSmall'
     import IconGlobe from 'atoms/IconGlobe'
-    // import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
-    // import Carousel from 'organisms/Carousel'
+    import Carousel from 'organisms/Carousel'
-    // import Fullscreen from 'organisms/Fullscreen'
+    import Fullscreen from 'organisms/Fullscreen'
-    // import Locations from 'organisms/Locations'
+    import Locations from 'organisms/Locations'
     import Footer from 'organisms/Footer'
     import SocialMetas from 'utils/SocialMetas'
-    import Transition from 'utils/Transition'
     // Animations
     import { animateIn } from 'animations/index'
+    pageAnimation.set(animateIn)
 
     // Props and Variables
     export let photos = ''
     const { page } = stores()
-    let Carousel
-    let Fullscreen
-    let InteractiveGlobe
-    let Locations
 
     // Reset current location if existing
     currentLocation.set()
@@ -64,13 +61,7 @@
     /*
     ** Run code when mounted
     */
-    onMount(async () => {
+    onMount(() => {
-        // Load components
-        await import('organisms/Carousel').then(module => Carousel = module.default)
-        await import('organisms/Fullscreen').then(module => Fullscreen = module.default)
-        await import('molecules/InteractiveGlobe').then(module => InteractiveGlobe = module.default)
-        await import('organisms/Locations').then(module => Locations = module.default)
-
         // Page is loaded
         pageReady.set(true)
     })
@@ -87,7 +78,7 @@
     />
 </svelte:head>
 
-<Transition animateIn={animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="intro">
         <div class="anim-mask">
             <div class="anim title-parallax" id="title-houses">
@@ -108,10 +99,8 @@
         </div>
 
         <div id="intro-carousel">
-            <!-- <Carousel {photos} locationUrl={true} /> -->
+            <Carousel {photos} locationUrl={true} />
-            <svelte:component this={Carousel} {photos} locationUrl={true} />
+            <Fullscreen />
-            <!-- <Fullscreen /> -->
-            <svelte:component this={Fullscreen} />
         </div>
     </section>
 
@@ -126,8 +115,11 @@
             <p>{$site.explore_globe}</p>
         </div>
 
-        <!-- <InteractiveGlobe /> -->
+        {#if process.browser}
-        <!-- <svelte:component this={InteractiveGlobe} /> -->
+        <Lazy offset={window.innerHeight}>
+            <InteractiveGlobe />
+        </Lazy>
+        {/if}
 
         <div class="anim-mask anim-title">
             <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
@@ -135,9 +127,8 @@
             </h1>
         </div>
 
-        <!-- <Locations /> -->
+        <Locations />
-        <svelte:component this={Locations} />
     </section>
 
     <Footer />
-</Transition>
+</main>

src/routes/location/[country]/[place].svelte

@@ -29,7 +29,8 @@
         locations,
         currentLocation,
         currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
     } from 'utils/store'
     import { formatDate, relativeTime, getThumbnail } from 'utils/functions'
     // Components
@@ -49,6 +50,7 @@
     // Props and variables
     export let photos
     const { page } = stores()
+    pageAnimation.set(animateIn)
     let layoutSetting
     let windowWidth
 
@@ -105,7 +107,7 @@
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="place">
         <div class="place__title">
             <h1 class="title-location title-location--big" aria-label="Houses of {location.name}">
@@ -144,7 +146,7 @@
                     </p>
                     {/if}
 
-                    {#if photos}
+                    {#if photos.length}
                     <p class="updated style-caps">
                         <strong>Updated</strong>
                         <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -157,11 +159,12 @@
         </div>
 
         {#if illu_desktop || illu_mobile}
-        <div class="place__illustration"
+        <div class="place__illustration">
-            style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
+            <div style="{`--url-desktop: ${illu_desktop ? `url(${illu_desktop.full_url});` : undefined}`}
-                   {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
+                        {`--url-desktop-2x: ${illu_desktop_2x ? `url(${illu_desktop_2x.full_url});` : undefined}`}
-                   {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
+                        {`--url-mobile: ${illu_mobile ? `url(${illu_mobile.full_url});` : undefined}`}"
-        />
+            />
+        </div>
         {/if}
     </section>
 
@@ -170,7 +173,7 @@
             <aside class="photos__side">
                 <Switcher type="switcher--side" />
 
-                {#if photos}
+                {#if photos.length}
                 <p class="updated style-caps">
                     <strong>Updated</strong>
                     <time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{dateUpdatedRelative}</time>
@@ -198,4 +201,4 @@
     </section>
 
     <Footer />
-</Transition>
+</main>

src/routes/viewer/[country]/[place]/[photo].svelte

@@ -36,7 +36,8 @@
         locations,
         currentLocation,
         currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
     } from 'utils/store'
     import { getThumbnail } from 'utils/functions'
 
@@ -56,6 +57,7 @@
 
     // Variables
     const { page } = stores()
+    pageAnimation.set(animateIn)
     let windowWidth
     let gotoLink
     let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
@@ -100,7 +102,7 @@
 
 <svelte:window bind:innerWidth={windowWidth} />
 
-<Transition {animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="viewer">
         <div class="viewer__top">
             <p class="tip">Tap for fullscreen</p>
@@ -120,12 +122,11 @@
             <a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
         </div>
 
-        <Carousel
+        <Carousel {photos}
             viewer="true"
-            photos={photos}
             on:photoChange={photoChanged}
         />
 
         <Fullscreen />
     </section>
-</Transition>
+</main>

src/style/layouts/_main.scss

@@ -4,7 +4,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    transition: opacity 0.6s $ease-quart;
+    transition: opacity 0.3s $ease-quart;
     will-change: opacity;
 
     &.is-transitioning {

src/style/pages/_place.scss

@@ -165,24 +165,32 @@
         position: absolute;
         z-index: 0;
         top: 0;
-        left: 50%;
+        left: 0;
         width: 100%;
         max-width: 1920px;
         height: 100%;
-        transform: translateX(-50%);
-        transform-origin: 0 0;
-        background-image: var(--url-mobile);
-        background-position: 0 0;
-        background-repeat: no-repeat;
-        background-size: 100% auto;
         will-change: transform, opacity;
 
-        @include breakpoint (sm) {
+        div {
-            background-image: var(--url-desktop);
+            position: relative;
-        }
+            left: 50%;
-        @media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
+            width: 100%;
-            (min-width: $screen-sm) and (min-resolution: 192dpi) {
+            height: 100%;
-            background-image: var(--url-desktop-2x);
+            transform: translateX(-50%);
+            transform-origin: 0 0;
+            background-image: var(--url-mobile);
+            background-position: 0 0;
+            background-repeat: no-repeat;
+            background-size: 100% auto;
+
+            @include breakpoint (sm) {
+                background-image: var(--url-desktop);
+            }
+            @media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
+                (min-width: $screen-sm) and (min-resolution: 192dpi) {
+                background-image: var(--url-desktop-2x);
+            }
         }
+
     }
 }

src/utils/Transition.svelte

@@ -1,10 +1,16 @@
 <script>
-    import { onMount } from 'svelte'
     import { fly, fade } from 'svelte/transition'
     import { quartInOut, quartOut } from 'svelte/easing'
     import { stores } from '@sapper/app'
-    import { pageReady, firstLoad, animPanelDelay } from 'utils/store'
+    import {
+        pageReady,
+        pageAnimation,
+        animDuration,
+        animDelay,
+        animPanelDelay
+    } from 'utils/store'
     const { page } = stores()
+    $: animateIn = $pageAnimation
 
     // Animations
     import { panelBackgroundOut } from 'animations/Transition'
@@ -14,46 +20,57 @@
     import IconGlobe from 'atoms/IconGlobe'
 
     // Props and Variables
-    export let animateIn = (scope) => {}
     let scope
     let show = false
+    let firstLoad = true
+    let previousPage = ''
 
+    // Check if path is excluded
+    const isExcluded = path => path.includes(['/viewer/'])
+
+    // Listen for route change
+    page.subscribe(page => {
+        // Show transition if page is not excluded
+        if (!isExcluded(previousPage) || !isExcluded(page.path)) {
+            pageReady.set(false)
+            process.browser && requestAnimationFrame(() => show = false)
+        }
+
+        // Update page for viewer navigation checking
+        previousPage = page.path
+    })
 
     // Listen for when a route is mounted
     pageReady.subscribe(loaded => {
         if (loaded) {
             setTimeout(() => {
-                // Display page content
+                // Show transition
                 show = true
-                // Run the page animation / after a tiny delay
+                // Run the page animation
-                requestAnimationFrame(() => animateIn(scope))
+                process.browser && requestAnimationFrame(() => animateIn())
                 // Change loader icon as the loader shown already
-                firstLoad.set(false)
+                firstLoad = false
                 // Scroll to page top
                 window.scrollTo(0,0)
-            }, animPanelDelay)
+            }, firstLoad ? animPanelDelay : 600)
         }
     })
 </script>
 
-{#if show || !process.browser}
+{#if !show}
-<slot />
-
-{:else}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
-        in:fly={{ y: 32, duration: 1000, easing: quartOut }}
+        in:fly={{ y: 24, duration: 800, easing: quartOut }}
-        out:fly={{ y: -window.innerHeight/2, duration: 1400, easing: quartInOut }}
+        out:fly={{ y: -window.innerHeight/2, duration: animDuration, easing: quartInOut }}
     >
-        {#if $firstLoad}
+        {#if firstLoad}
         <TitleSite init={true} />
         {:else}
         <IconGlobe width="44" color="#fff" animated="true" />
         {/if}
     </div>
     <div class="transition__background"
-        in:fade={{ duration: 600, easing: quartInOut }}
+        out:panelBackgroundOut={{ duration: animDuration }}
-        out:panelBackgroundOut={{ duration: 1400 }}
     />
 </div>
 {/if}

src/utils/functions.js

@@ -1,10 +1,11 @@
+
 import { apiEndpoints } from './store'
 
 
 /*
 ** Get thumbnail from API
 */
-export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
+export const getThumbnail = (id, width, height, type = 'crop', quality = 80) => {
     const ratio = 1.5
     width = !width ? Math.round(height * ratio) : width
     height = !height ? Math.round(width / ratio) : height

src/utils/store.js

@@ -25,14 +25,14 @@ export let currentPhotos = writable()
 
 // State
 export let pageReady = writable(false, () => {})
-export let firstLoad = writable(true)
+export let fullscreen = writable(undefined, () => {})
-export let fullscreen = writable()
 
 
 /* ==========================================================================
    Animation related
 ========================================================================== */
-export const animDelay = 800
+export let pageAnimation = writable(() => {}, () => {})
-export const animPanelDelay = 1000
+export const animDelay = 900
+export const animPanelDelay = 900
 export const animDuration = 1400
 export const animDurationLong = 1800