WIP on performances

src/animations/Carousel.js

@@ -10,7 +10,7 @@ export const animateIn = scope => {
     const tl = anime.timeline({
         easing: 'easeOutQuart',
         duration: animDuration,
-        delay: animDelay,
+        // delay: animDelay,
         autoplay: false
     })
 

src/animations/index.js

@@ -18,7 +18,7 @@ export const animateIn = () => {
         duration: animDuration
     })
 
-    // Parallax on scroll
+    // Title: Parallax on scroll
     const translate = anime({
         targets: '#title-houses',
         translateX: ['7%', '-15%'],

src/molecules/InteractiveGlobe.svelte

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

src/molecules/Photo.svelte

@@ -54,7 +54,7 @@
                     <source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
                     <source media="(min-width: 500px)" data-srcset={getThumbnail(private_hash, 650)}>
                     <source media="(min-width: 300px)" data-srcset={getThumbnail(private_hash, 400)}>
-                    <img src={getThumbnail(private_hash, 900)}
+                    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                         width={defaultWidth} height={defaultHeight}
                         alt={imgAlt}
                         class:lazyload={layout === 'list'}

src/organisms/Carousel.svelte

@@ -159,7 +159,7 @@
                         <source media="(min-width: 800px)" data-srcset={getThumbnail(image.private_hash, 900)}>
                         <source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
                         <source media="(min-width: 300px)" data-srcset={getThumbnail(image.private_hash, 400)}>
-                        <img src={getThumbnail(image.private_hash, 900)}
+                        <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                             alt="{name}, {location.name}, {location.country.name}"
                             width={defaultWidth} height={defaultHeight}
                             class:lazyload={

src/routes/index.svelte

@@ -32,6 +32,8 @@
         pageReady
     } from 'utils/store'
     import { charsToSpan, smoothScroll } from 'utils/functions'
+    // Dependencies
+    import ScrollOut from 'scroll-out'
     // Components
     import Button from 'atoms/Button'
     import IconGlobeSmall from 'atoms/IconGlobeSmall'
@@ -49,6 +51,10 @@
     // Props and Variables
     export let photos = ''
     const { page } = stores()
+    // let Carousel
+    // let Fullscreen
+    // let InteractiveGlobe
+    // let Locations
 
     // Reset current location if existing
     currentLocation.set()
@@ -58,7 +64,13 @@
     /*
     ** Run code when mounted
     */
-    onMount(() => {
+    onMount(async () => {
+        // 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)
     })
@@ -97,7 +109,9 @@
 
         <div id="intro-carousel">
             <Carousel {photos} locationUrl={true} />
+            <!-- <svelte:component this={Carousel} {photos} locationUrl={true} /> -->
             <Fullscreen />
+            <!-- <svelte:component this={Fullscreen} /> -->
         </div>
     </section>
 
@@ -113,6 +127,7 @@
         </div>
 
         <InteractiveGlobe />
+        <!-- <svelte:component this={InteractiveGlobe} /> -->
 
         <div class="anim-mask anim-title">
             <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
@@ -121,6 +136,7 @@
         </div>
 
         <Locations />
+        <!-- <svelte:component this={Locations} /> -->
     </section>
 
     <Footer />

src/utils/Transition.svelte

@@ -3,7 +3,7 @@
     import { fly, fade } from 'svelte/transition'
     import { quartInOut, quartOut } from 'svelte/easing'
     import { stores } from '@sapper/app'
-    import { pageReady, firstLoad, animDelayPanel } from 'utils/store'
+    import { pageReady, firstLoad, animPanelDelay } from 'utils/store'
     const { page } = stores()
 
     // Animations
@@ -14,30 +14,31 @@
     import IconGlobe from 'atoms/IconGlobe'
 
     // Props and Variables
-    export let animateIn = scope => {}
+    export let animateIn = (scope) => {}
     let scope
     let show = false
 
 
     // Listen for when a route is mounted
     pageReady.subscribe(loaded => {
-        loaded && setTimeout(() => {
+        if (loaded) {
-            // Display page content
+            setTimeout(() => {
-            show = true
+                // Display page content
-            // Change loader icon as the loader shown already
+                show = true
-            firstLoad.set(false)
+                // Run the page animation / after a tiny delay
-            // Scroll to page top
+                requestAnimationFrame(() => animateIn(scope))
-            window.scrollTo(0,0)
+                // Change loader icon as the loader shown already
-            // Run the page animation / after a tiny delay
+                firstLoad.set(false)
-            requestAnimationFrame(() => animateIn(scope))
+                // Scroll to page top
-        }, animDelayPanel)
+                window.scrollTo(0,0)
+            }, animPanelDelay)
+        }
     })
 </script>
 
-{#if show || !process.browser}
 <slot />
 
-{:else}
+{#if !show && process.browser}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
         in:fly={{ y: 32, duration: 1000, easing: quartOut }}

src/utils/store.js

@@ -33,6 +33,6 @@ export let fullscreen = writable()
    Animation related
 ========================================================================== */
 export const animDelay = 800
-export const animDelayPanel = 1000
+export const animPanelDelay = 1000
 export const animDuration = 1400
 export const animDurationLong = 1800