Viewer: Fix Carousel and error page

src/animations/Carousel.js

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

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

@@ -71,6 +71,7 @@
     const photoChanged = event => {
         const currentPhoto = event.detail
         const windowPathname = window.location.pathname
+        if (currentPhoto) {
             const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
             // Go to page via a sapper-noscroll link to avoid scroll jump (hacky)
             if (gotoLink && newUrl) {
@@ -78,6 +79,7 @@
                 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>