Viewer: Fix Carousel and error page

src/animations/Carousel.js

@@ -52,25 +52,25 @@ export const animateIn = scope => {
 
     // Reveal on scroll
     let visible = false
-    const carouselReveal = ScrollOut({
+    requestAnimationFrame(() => {
-        once: true,
+        const carouselReveal = ScrollOut({
-        targets: scope,
+            once: true,
-        onChange: (el, ctx) => {
+            targets: scope,
-            requestAnimationFrame(() => {
+            onChange: (el, ctx) => {
                 if (ctx.visible === 0) {
                     visible = true
                 }
-            })
+            },
-        },
+            onShown: (el, ctx) => {
-        onShown: (el, ctx) => {
+                // If revealed on scroll, no delay
-            // If revealed on scroll, no delay
+                if (visible) {
-            if (visible) {
+                    requestAnimationFrame(() => tl.restart())
-                tl.restart()
+                }
+                // If revealed on load, add a delay
+                else {
+                    setTimeout(() => tl.restart(), animDelay * 2)
+                }
             }
-            // If revealed on load, add a delay
+        })
-            else {
-                setTimeout(() => tl.restart(), animDelay * 2)
-            }
-        }
     })
 }

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

@@ -71,11 +71,13 @@
     const photoChanged = event => {
         const currentPhoto = event.detail
         const windowPathname = window.location.pathname
-        const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
+        if (currentPhoto) {
-        // Go to page via a sapper-noscroll link to avoid scroll jump (hacky)
+            const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
-        if (gotoLink && newUrl) {
+            // Go to page via a sapper-noscroll link to avoid scroll jump (hacky)
-            gotoLink.href = newUrl
+            if (gotoLink && newUrl) {
-            gotoLink.click()
+                gotoLink.href = newUrl
+                gotoLink.click()
+            }
         }
     }
 
@@ -116,10 +118,12 @@
                         <circle cx="50%" cy="50%" r="{windowWidth >= 768 ? 32 : 24}px"></circle>
                     </svg>
                 </a>
+                {#if $currentLocation}
                 <a href="/location/{$currentLocation.country.slug}/{$currentLocation.slug}" class="button-control button-control--pink dir-bottom" aria-label="Back to photos" rel="prefetch">
                     <IconCross color="#fff" width="18" class="icon" />
                     <IconCross color="#fff" width="18" class="icon" hidden="true" />
                 </a>
+                {/if}
             </div>
             <a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
         </div>