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,22 +3,13 @@
 
     // Variables
     let toggleEl
-    let toggleLayout
+    let grid
+    let pill
     let layoutSetting
 
-
+    // Elements
-    /*
-    ** Run code when mounted
-    */
-    onMount(() => {
-        // 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) => {
@@ -26,11 +17,8 @@
         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 toggleLayout = event => {
         const clicked = event.currentTarget
         const type = clicked.dataset.layout
 
@@ -57,6 +45,19 @@
         // 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'
+
+        // Init of first option
+        toggleAnimate(toggleEl.querySelector(`[data-layout="${layoutSetting}"]`), pill, toggleEl)
     })
 </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,9 +11,6 @@
         ]
         // 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) {
@@ -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 }}