Code clean,

.env

@@ -1,6 +1,7 @@
 # Website
 PROD_URL="https://housesof.world"
 TRANSITION=true
+HOME_PHOTOS_LIMIT=6
 
 # API
 API_TOKEN="NJk0urljsdSvApUDzWxGgoO6"

src/animations/TitleSite.js

@@ -7,21 +7,20 @@ import { animDelay } from 'utils/store'
 ** Transition In
 */
 export const animateIn = (scope, init) => {
-    const tl = anime.timeline({
-        easing: 'easeOutQuart',
-        duration: 1000
-    })
     // Stagger each letters and words
-    tl.add({
+    const letters = anime({
         targets: scope.querySelectorAll('span, em span'),
         translateY: ['100%', 0],
+        easing: 'easeOutQuart',
+        duration: 1000,
         delay: anime.stagger(40, { start: init ? 0 : animDelay }),
+        autoplay: false
     })
 
     // On scroll animation
     const title = ScrollOut({
         once: true,
         targets: scope,
-        onShown: () => tl.restart()
+        onShown: () => letters.restart()
     })
 }

src/animations/index.js

@@ -36,8 +36,8 @@ export const animateIn = () => {
         duration: animDuration,
         autoplay: false
     })
-    window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
+    window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 5))
-    requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
+    requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate))
 
     // Intro: Description
     const introDescription = anime({

src/atoms/ToggleLayout.svelte

@@ -3,60 +3,61 @@
 
     // Variables
     let toggleEl
-    let toggleLayout
+    let grid
+    let pill
     let layoutSetting
 
+    // Elements
+    const layoutGridClass = 'photos--grid'
+    const layoutListClass = 'photos--list'
+
+    // Change active pill
+    const toggleAnimate = (elem, pill, toggle) => {
+        pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
+        pill.style.left = Math.round(elem.getBoundingClientRect().left - toggleEl.getBoundingClientRect().left) + 'px'
+    }
+
+    // Toggle layout
+    const toggleLayout = event => {
+        const clicked = event.currentTarget
+        const type = clicked.dataset.layout
+
+        // Change the layout
+        switch (type) {
+            case 'grid':
+                grid.classList.add(layoutGridClass)
+                grid.classList.remove(layoutListClass)
+                break
+            case 'list':
+                grid.classList.add(layoutListClass)
+                grid.classList.remove(layoutGridClass)
+                break
+            default: break
+        }
+
+        // Animate the active pill
+        toggleAnimate(clicked, pill, toggleEl)
+
+        // Add/Remove active classes
+        toggleEl.querySelectorAll('button').forEach(button => button.classList.remove('active'))
+        clicked.classList.add('active')
+
+        // Remember this setting
+        localStorage.setItem('photosLayout', type)
+    }
+
 
     /*
     ** Run code when mounted
     */
     onMount(() => {
+        grid = document.querySelector('.photos')
+
         // Get layout setting from storage
         layoutSetting = (localStorage.getItem('photosLayout')) ? localStorage.getItem('photosLayout') : 'list'
 
-        // Variables
-        const layoutGridClass = 'photos--grid'
-        const layoutListClass = 'photos--list'
-        const grid = document.querySelector('.photos')
-        const pill = toggleEl.querySelector('.pill')
-
-        // Change active pill
-        const toggleAnimate = (elem, pill, toggle) => {
-            pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
-            pill.style.left = Math.round(elem.getBoundingClientRect().left - toggleEl.getBoundingClientRect().left) + 'px'
-        }
-
         // Init of first option
         toggleAnimate(toggleEl.querySelector(`[data-layout="${layoutSetting}"]`), pill, toggleEl)
-
-        // Toggle layout
-        toggleLayout = event => {
-            const clicked = event.currentTarget
-            const type = clicked.dataset.layout
-
-            // Change the layout
-            switch (type) {
-                case 'grid':
-                    grid.classList.add(layoutGridClass)
-                    grid.classList.remove(layoutListClass)
-                    break
-                case 'list':
-                    grid.classList.add(layoutListClass)
-                    grid.classList.remove(layoutGridClass)
-                    break
-                default: break
-            }
-
-            // Animate the active pill
-            toggleAnimate(clicked, pill, toggleEl)
-
-            // Add/Remove active classes
-            toggleEl.querySelectorAll('button').forEach(button => button.classList.remove('active'))
-            clicked.classList.add('active')
-
-            // Remember this setting
-            localStorage.setItem('photosLayout', type)
-        }
     })
 </script>
 
@@ -84,5 +85,5 @@
         <span>Grid</span>
     </button>
 
-    <div class="pill" aria-hidden="true" role="presentation"></div>
+    <div class="pill" aria-hidden="true" role="presentation" bind:this={pill}></div>
 </div>

src/routes/_layout.svelte

@@ -9,7 +9,6 @@
                         description
                         explore_globe
                         explore_list
-                        homepage_photos_limit
                         photos_per_page
                         instagram
                         seo_name

src/routes/index.svelte

@@ -1,6 +1,6 @@
 <script context="module">
     // Variables
-    let limit
+    let limit = process.env.CONFIG.HOME_PHOTOS_LIMIT
 
 	// Preload data (photos to display)
 	export async function preload (page, session) {
@@ -11,12 +11,9 @@
         ]
         // Random sort
         const sort = '?'
-        // Get the limit from API
-        site.subscribe(store => limit = store.homepage_photos_limit)
-
         const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
         const photos = await req.json()
-		if (req.ok) {
+        if (req.ok) {
             return { photos: photos.data }
         }
         this.error(404, 'Not found')
@@ -103,10 +100,8 @@
         </div>
 
         <div id="intro-carousel">
-            {#if photos}
             <Carousel {photos} />
             <Fullscreen />
-            {/if}
         </div>
     </section>
 

src/utils/Transition.svelte

@@ -37,7 +37,7 @@
 {#if show || !process.browser}
 <slot />
 
-{:else}
+{:else if process.env.CONFIG.TRANSITION}
 <div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="transition__loader"
         in:fly={{ y: 32, duration: 1000, easing: quartOut }}