From d6671f0e949537b92014dc0555ece2df75d0816c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 9 Apr 2020 20:27:45 +0200
Subject: [PATCH] Carousel: Fix transitions due to opacity and box-shadow

---
 src/style/organisms/_carousel.scss | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index fe6cf0d..5e12357 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -63,33 +63,29 @@
             left: 0;
             width: 100%;
             height: 100%;
-            box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
             transform: scale($scale) translateZ(0);
             transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
             pointer-events: none;
             @extend %willchange;
 
-            // Active photo
-            &.is-active {
+            // Visible photos
+            &.is-active, &.is-prev, &.is-next {
                 opacity: 1;
-                z-index: 10;
-                transform: scale(1) translateZ(0);
                 pointer-events: auto;
 
-                img {
+                picture {
                     opacity: 1;
                 }
             }
 
+            // Active photo
+            &.is-active {
+                z-index: 10;
+                transform: scale(1) translateZ(0);
+            }
+
             // Previous & next photo
             &.is-prev, &.is-next {
-                opacity: 1;
-                pointer-events: auto;
-
-                img {
-                    opacity: 1;
-                }
-
                 picture:before {
                     @include breakpoint (sm) {
                         opacity: 0.4;
@@ -132,11 +128,15 @@
 
         // Picture
         &__picture {
+            opacity: 0;
             position: relative;
             display: block;
             overflow: hidden;
             width: 100%;
             height: 100%;
+            box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
+            transition: opacity 1s $ease-quart;
+            will-change: opacity;
             @extend %willchange;
 
             @include breakpoint (sm) {
@@ -158,7 +158,6 @@
             }
 
             img {
-                opacity: 0;
                 position: relative;
                 z-index: 1;
                 display: block;