From 2522233a0eb20b9c6099083eb114282c05a73210 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 30 Nov 2021 19:47:42 +0100
Subject: [PATCH] Add a parent to each photo on Viewer

Allows to animate the parent that has no transform/top
---
 .../[country]/[location]/[photo].svelte       |  26 +-
 src/style/pages/_viewer-photo.scss            | 222 ++++++++++--------
 2 files changed, 137 insertions(+), 111 deletions(-)

diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index e8bf55b..5541180 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -242,18 +242,20 @@
         <div class="viewer-photo__carousel">
             <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                 {#each visiblePhotos as photo, index (photo.id)}
-                    <Image
-                        class="photo photo--{currentIndex === 0 ? index + 1 : index}"
-                        id={photo.image.id}
-                        alt={photo.title}
-                        sizeKey="photo-list"
-                        sizes={{
-                            small: { width: 500 },
-                            medium: { width: 850 },
-                            large: { width: 1280 },
-                        }}
-                        ratio={1.5}
-                    />
+                    <div class="viewer-photo__picture is-{currentIndex === 0 ? index + 1 : index}">
+                        <Image
+                            class="photo"
+                            id={photo.image.id}
+                            alt={photo.title}
+                            sizeKey="photo-list"
+                            sizes={{
+                                small: { width: 500 },
+                                medium: { width: 850 },
+                                large: { width: 1280 },
+                            }}
+                            ratio={1.5}
+                        />
+                    </div>
                 {/each}
 
                 <div class="viewer-photo__controls">
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
index ac172b7..99b192a 100644
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -45,39 +45,53 @@
         margin: auto auto 0;
         padding-top: 66.66%;
         touch-action: none;
+    }
+
+    &__picture {
+        --opacity: 1;
+        --scale: 0.6;
+        --rotate: 0deg;
+        --offset-x: 0%;
+        --offset-y: 0%;
+        position: absolute;
+        z-index: 8;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform: translateZ(0);
+        will-change: transform, opacity;
+
+        @include bp (md) {
+            --scale: 0.6;
+            --rotate: 5deg;
+            --offset-x: 28.5%;
+            --offset-y: 0%;
+            top: 0;
+            left: 0;
+            transform-origin: bottom right;
+        }
 
         .photo {
-            --opacity: 1;
-            --scale: 0.6;
-            --rotate: 0deg;
-            --offset-x: -50%;
-            --offset-y: -30%;
             position: absolute;
-            top: 50%;
-            left: 50%;
-            display: block;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
-            z-index: 8;
-            overflow: hidden;
-            opacity: 0;
-            background: $color-primary;
             transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
-            transform-origin: top center;
-            cursor: default;
-            will-change: transform;
             transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
+            will-change: transform;
 
-            @include bp (md) {
-                --scale: 0.6;
-                --rotate: 5deg;
-                --offset-x: 13%;
-                --offset-y: -65%;
-                top: 50%;
+            picture {
+                position: absolute;
+                top: 0;
                 left: 0;
-                transform-origin: bottom right;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                background: $color-primary;
+                cursor: default;
             }
-
             img {
                 display: block;
                 width: 100%;
@@ -87,99 +101,109 @@
                 transform: translateZ(0);
                 pointer-events: none;
                 user-select: none;
+                transition: opacity 1s var(--ease-quart);
             }
+        }
 
-            // Hidden photo over
-            &--0 {
-                --scale: 1.05;
-                --rotate: 0deg;
-                --offset-x: -50%;
-                --offset-y: -62.5%;
-                z-index: 9;
+        // Hidden photo over
+        &.is-0 {
+            --scale: 1.03;
+            --rotate: 0deg;
+            --offset-x: 0%;
+            --offset-y: -7%;
+            z-index: 9;
+
+            .photo {
                 opacity: 0;
-
-                @include bp (md) {
-                    --scale: 1.075;
-                    --rotate: -1deg;
-                    --offset-x: -4%;
-                    --offset-y: -47.5%;
-                }
             }
-            // First visible photo
-            &--1 {
-                --scale: 1;
-                --rotate: 0deg;
-                --offset-y: -50%;
-                opacity: 1;
+
+            @include bp (md) {
+                --scale: 1.075;
+                --rotate: -1deg;
+                --offset-x: -9%;
+                --offset-y: 0%;
+            }
+        }
+        // First visible photo
+        &.is-1 {
+            --scale: 1;
+            --rotate: 0deg;
+            --offset-y: 0%;
+
+            .photo {
                 box-shadow:
                     0 12px 12px rgba(#000, 0.15),
                     0 20px 20px rgba(#000, 0.15),
                     0 48px 48px rgba(#000, 0.15);
-
-                @include bp (md) {
-                    --offset-x: 0%;
-                    --offset-y: -50%;
-                }
             }
-            &--2 {
+
+            @include bp (md) {
+                --offset-x: 0%;
+                --offset-y: 0%;
+            }
+        }
+        &.is-2 {
+            --scale: 0.9;
+            --opacity: 0.75;
+            --offset-y: 12%;
+            z-index: 7;
+
+            @include bp (md) {
                 --scale: 0.9;
-                --opacity: 0.75;
-                --offset-y: -34%;
-                z-index: 7;
-                opacity: 1;
-
-                @include bp (md) {
-                    --scale: 0.9;
-                    --rotate: 1deg;
-                    --offset-x: 3.75%;
-                    --offset-y: -54%;
-                }
+                --rotate: 1deg;
+                --offset-x: 9.5%;
+                --offset-y: 0%;
             }
-            &--3 {
+        }
+        &.is-3 {
+            --scale: 0.83;
+            --opacity: 0.55;
+            --offset-y: 20%;
+            z-index: 6;
+
+            @include bp (md) {
                 --scale: 0.83;
-                --opacity: 0.55;
-                --offset-y: -22.5%;
-                z-index: 6;
-                opacity: 1;
-
-                @include bp (md) {
-                    --scale: 0.83;
-                    --rotate: 2deg;
-                    --offset-x: 6.5%;
-                    --offset-y: -56.5%;
-                }
+                --rotate: 2deg;
+                --offset-x: 16.25%;
+                --offset-y: 0%;
             }
-            &--4 {
+        }
+        &.is-4 {
+            --scale: 0.75;
+            --opacity: 0.45;
+            --offset-y: 27.5%;
+            z-index: 5;
+
+            @include bp (md) {
                 --scale: 0.75;
-                --opacity: 0.45;
-                --offset-y: -11%;
-                z-index: 5;
-                opacity: 1;
-
-                @include bp (md) {
-                    --scale: 0.75;
-                    --rotate: 3deg;
-                    --offset-x: 9%;
-                    --offset-y: -59%;
-                }
+                --rotate: 3deg;
+                --offset-x: 22%;
+                --offset-y: 0%;
             }
-            &--5 {
+        }
+        &.is-5 {
+            --scale: 0.68;
+            --opacity: 0.25;
+            --offset-y: 33%;
+            z-index: 4;
+
+            @include bp (md) {
                 --scale: 0.68;
-                --opacity: 0.25;
-                --offset-y: -1.5%;
-                z-index: 4;
-                opacity: 1;
-
-                @include bp (md) {
-                    --scale: 0.68;
-                    --rotate: 4deg;
-                    --offset-x: 10.5%;
-                    --offset-y: -61.5%;
-                }
+                --rotate: 4deg;
+                --offset-x: 27%;
+                --offset-y: 0%;
             }
-            &--6 {
-                --opacity: 0.25;
-                z-index: 3;
+        }
+        &.is-6 {
+            --opacity: 0.25;
+            z-index: 3;
+
+            .photo {
+                opacity: 0;
+            }
+        }
+        &.is-7 {
+            .photo {
                 opacity: 0;
             }
         }