From fab89736edb94e6b3ef9c1d9f42027bde407da13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 26 Feb 2020 15:58:22 +0100
Subject: [PATCH] Carousel: Add a transition on title when changing photo

---
 src/organisms/Carousel.svelte      | 21 ++++++++++---
 src/style/organisms/_carousel.scss | 50 +++++++++++++++++++++++++-----
 src/style/pages/_viewer.scss       |  3 +-
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 920a1ee..f173a3e 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -1,5 +1,7 @@
 <script>
     import { onMount } from 'svelte'
+    import { fly } from 'svelte/transition'
+    import { currentLocation } from '../store'
     import * as fn from '../functions'
 
     // Dependencies
@@ -152,16 +154,27 @@
             </div>
 
             {#if viewer}
-            <div class="carousel__number">{currentIndex < 10 ? 0 : ''}{currentIndex + 1}</div>
+            <div class="carousel__number">
+                {currentIndex < 10 ? 0 : ''}{photos.length - currentIndex}
+            </div>
             {/if}
         </div>
 
         <div class="carousel__information">
             <div class="carousel__information--location style-location">
-                <p class="street">{currentPhoto.name}</p>
-                <p class="style-caps state">{currentPhoto.location.region}, {currentPhoto.location.country.name}</p>
+                <p class="street">
+                    {#each photos as photo, index}
+                    <span aria-hidden={photo !== currentPhoto}
+                        class:prev={photo === prevPhoto}
+                        class:active={photo === currentPhoto}
+                        class:next={photo === nextPhoto}>
+                        {photo.name}
+                    </span>
+                    {/each}
+                </p>
+                <p class="state style-caps style-caps--transparent">Add the state!!!</p>
+                <!-- <p class="state style-caps style-caps--transparent">{photo.location.region}, {photo.location.country.name}</p> -->
             </div>
-            <!-- Duplicate for animation? -->
             {#if viewer}
             <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
             {/if}
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index d9a663b..5f6b041 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -44,6 +44,8 @@
 
             // Photo
             &--photo {
+                $duration: 0.9s;
+
                 opacity: 0;
                 overflow: hidden;
                 position: absolute;
@@ -54,7 +56,7 @@
                 height: 100%;
                 transform: scale($scale);
                 box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
-                transition: transform 600ms $ease-quart, opacity 600ms $ease-quart;
+                transition: transform $duration $ease-quart, opacity $duration $ease-quart;
                 will-change: transform, opacity;
 
                 @include breakpoint (sm) {
@@ -179,16 +181,23 @@
         }
     }
 
-    // Information
+
+    /*
+    ** Information
+    */
     &__information {
         position: relative;
         z-index: 3;
 
         // Location
         &--location {
+            text-align: center;
+
             .street {
-                margin-top: 24px;
-                color: #fff;
+                width: 100%;
+                position: relative;
+                margin-top: 32px;
+                height: 30px;
 
                 @include breakpoint (sm) {
                     margin-top: pxVW(80);
@@ -196,16 +205,43 @@
                 @include breakpoint (xl) {
                     margin-top: 72px;
                 }
+
+                span {
+                    $distance: 40%;
+
+                    position: absolute;
+                    display: block;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    white-space: nowrap;
+                    transform: translateY(-$distance);
+                    opacity: 0;
+                    transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+                    will-change: transform, opacity;
+
+                    &.prev {
+                        transform: translateY(-$distance);
+                    }
+                    &.active {
+                        transform: translateY(0);
+                        opacity: 1;
+                    }
+                    &.next {
+                        transform: translateY($distance);
+                    }
+                }
             }
             .state {
-                margin-top: 4px;
-                color: rgba($color-tertiary, 0.5);
+                margin-top: 6px;
             }
         }
     }
 
 
-    // Dots for slider (mobile)
+    /*
+    ** Dots for slider (mobile)
+    */
     &__dots {
         display: none;
 
diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss
index 1ad3ea6..b654cfa 100644
--- a/src/style/pages/_viewer.scss
+++ b/src/style/pages/_viewer.scss
@@ -96,7 +96,7 @@
 
         // Information
         &__information {
-            margin-top: 24px;
+            margin-top: 32px;
             padding: 0 24px;
 
             @include breakpoint (sm) {
@@ -107,6 +107,7 @@
 
             // Location
             &--location {
+                width: 75%;
                 text-align: left;
 
                 .street {