Viewer: Add intro animation, Visual fixes (WIP)

src/animations/viewer.js

@@ -0,0 +1,37 @@
+import anime from 'animejs'
+import { animDuration } from '../utils/store'
+
+
+/*
+** Transition In
+*/
+export const animateIn = () => {
+    // Buttons
+    anime({
+        targets: '.viewer__top p, .viewer__top .buttons a',
+        translateY: [-32, 0],
+        duration: animDuration,
+        delay: anime.stagger(150, { start: 600 }),
+        easing: 'easeOutQuart'
+    })
+
+    // Carousel
+    anime({
+        targets: '.viewer .carousel',
+        opacity: [0, 1],
+        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
+        duration: animDuration,
+        delay: 300,
+        easing: 'easeOutQuart'
+    })
+
+    // Carousel: Number
+    anime({
+        targets: '.viewer .carousel__number_column',
+        opacity: [0, 1],
+        marginTop: [24, 0],
+        duration: animDuration,
+        delay: anime.stagger(100, { start: 450 }),
+        easing: 'easeOutQuart'
+    })
+}

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

@@ -45,8 +45,8 @@
     import SocialMetas from '../../../../utils/SocialMetas'
 
     // Animations
-    // import { animateIn } from '../../../animations/photoPage'
-    // pageTransition.onAnimationEnd = animateIn
+    import { animateIn } from '../../../../animations/viewer'
+    pageTransition.onAnimationEnd = animateIn
 
 
     // Props

src/style/pages/_viewer.scss

@@ -3,14 +3,13 @@
     position: relative;
     height: 100vh;
     min-height: 560px;
-    padding-top: 24px;
 
     @include breakpoint (sm) {
+        width: 100%;
+        height: 100vh;
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
+        justify-content: space-between;
     }
 
 
@@ -18,11 +17,7 @@
     ** Top part
     */
     &__top {
-        position: absolute;
         z-index: 10;
-        top: 0;
-        left: 0;
-        right: 0;
         margin-top: 16px;
         padding-left: 24px;
         padding-right: 16px;
@@ -69,22 +64,20 @@
     ** Carousel
     */
     .carousel {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-37%);
-        margin: 0;
-
+        @include breakpoint (xs) {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            transform: translateY(-37%);
+        }
         @include breakpoint (sm) {
-            // position: static;
-            // transform: none;
-            // margin-top: auto;
-            // margin-bottom: auto;
-            left: 50%;
-            transform: translate(-50%, -45%);
-            width: 85%;
-            min-height: 500px;
+            width: 100%;
+            margin: auto;
+        }
+        // Landscape
+        @media screen and (max-width: $screen-lg) and (orientation: landscape) {
+            width: 60%;
         }
 
         // Gallery
@@ -114,22 +107,29 @@
 
         // Location
         &__locations {
-            width: 75%;
+            @include breakpoint (sm) {
+                width: 75%;
+            }
         }
         &__location {
-            text-align: left;
             margin-top: 0;
+
+            @include breakpoint (sm) {
+                text-align: left;
+            }
         }
 
         // Date
         &__date {
-            color: rgba($color-tertiary, 0.5);
-            font-size: rem(12px);
             margin-top: 16px;
+            font-size: rem(12px);
+            color: rgba($color-tertiary, 0.5);
+            text-align: center;
 
             @include breakpoint (sm) {
-                font-size: rem(14px);
                 margin: 0;
+                font-size: rem(14px);
+                text-align: left;
             }
         }
 
@@ -138,26 +138,24 @@
             position: absolute;
             z-index: 1;
             left: 0;
-            top: -33.5vw;
+            top: -28vw;
             width: 100%;
-            font-family: $font-serif-extra;
-            font-size: pxVW(672);
-            color: rgba($color-tertiary, 0.4);
-            text-align: center;
-            pointer-events: none;
-            user-select: none;
+            height: 42vw;
+            max-height: 232px;
+            overflow: hidden;
 
             @include breakpoint (sm) {
-                display: block;
                 top: auto;
-                right: 112px;
-                bottom: -240px;
+                right: 176px;
+                left: auto;
+                // bottom: -240px;
                 width: auto;
-                font-size: rem(250px);
+                font-size: rem(240px);
                 text-align: right;
             }
             @include breakpoint (md) {
-                bottom: -288px;
+                // bottom: -288px;
+                bottom: -160px;
                 font-size: rem(300px);
             }
         }