Add parallax and reveal effects + performances on transitions

src/molecules/InteractiveGlobe.svelte

@@ -1,3 +1,8 @@
+<script>
+    // Idea: https://codepen.io/edankwan/pen/emqgpr
+    // Idea 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
+</script>
+
 <div class="globe">
     <div class="wrap">
         <img src="/img/globe.png" alt="">

src/molecules/Photo.svelte

@@ -1,8 +1,11 @@
 <script>
+    import { onMount } from 'svelte'
     import { site, currentLocation } from '../store'
     import * as fn from '../functions'
 
     // Dependencies
+    import AOS from 'aos'
+    import * as basicScroll from 'basicscroll'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat'
     dayjs.extend(advancedFormat)
@@ -14,6 +17,33 @@
     // Shortcut current location
     let location
     $: location = $currentLocation.location
+
+
+    /*
+	** Run code on browser only
+	*/
+	onMount(() => {
+		// Scroll apparitions
+		if (process.browser) {
+			AOS.init()
+        }
+
+        // Parallax on photos
+		document.querySelectorAll('.photos .photo').forEach(photo => {
+			const parallaxNumber = basicScroll.default.create({
+				elem: photo.querySelector('.photo__image--number'),
+				direct: true,
+				from: photo.getBoundingClientRect().top * 0.25,
+				to: photo.getBoundingClientRect().bottom * 0.92,
+				props: {
+					'--translate': {
+						from: '-75%',
+						to: '-25%'
+					}
+				}
+			}).start()
+		})
+    })
 </script>
 
 <div class="photo">
@@ -32,13 +62,15 @@
                     <source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
                     <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
                     <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}">
+                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
+                        data-aos="scale-down-fade-in"
+                    >
                 </picture>
+            </a>
             <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
                 {dayjs(photo.date).format('MMM Do, YYYY')}
             </time>
             <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
-            </a>
         </div>
     </div>
 </div>

src/routes/index.svelte

@@ -88,7 +88,7 @@
 
 <section class="intro">
     <div class="anim-mask">
-        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top">
+        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top" data-aos-once="true">
             <h1 class="title-massive" aria-label="Houses">
                 {@html fn.lettersToSpan('Houses')}
             </h1>
@@ -109,7 +109,7 @@
 </section>
 
 <section class="explore explore--homepage">
-    <div class="of" aria-label="of" data-aos="letters-translate-bottom">
+    <div class="of" aria-label="of" data-aos="letters-translate-bottom" data-aos-once="true">
         <div class="anim-mask">
             {@html fn.lettersToSpan('of')}
         </div>
@@ -122,7 +122,7 @@
     <InteractiveGlobe />
 
     <div class="anim-mask anim-title">
-        <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom">
+        <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom" data-aos-once="true">
             {@html fn.lettersToSpan('World')}
         </h1>
     </div>

src/style/_animations.scss

@@ -3,7 +3,7 @@
 ========================================================================== */
 // Parallax title: Translate X
 .title-parallax {
-    transform: translate3d(var(--translateX), 0, 0);
+    transform: translateX(var(--translateX));
     will-change: transform;
 }
 
@@ -17,14 +17,16 @@
     overflow: hidden;
 }
 
-// Translate each letter from top/bottom
+// Translate each letter from a direction
 [data-aos="letters-translate-top"],
 [data-aos="letters-translate-bottom"] {
     white-space: nowrap;
 
     span {
         display: inline-block;
-        transition: all 1000ms $ease-quart;
+        transition: transform 1000ms $ease-quart;
+        will-change: transform;
+
 
         @for $i from 1 to 8 {
             &:nth-child(#{$i}) {
@@ -35,18 +37,66 @@
 
     &.aos-animate {
         span {
-            transform: translate3d(0, 0, 0);
+            transform: translate(0, 0);
         }
     }
 }
 [data-aos="letters-translate-top"] {
     span {
-        transform: translate3d(0, -100%, 0);
+        transform: translate(0, -100%);
     }
 }
 [data-aos="letters-translate-bottom"] {
     span {
-        transform: translate3d(0, 100%, 0);
+        transform: translate(0, 100%);
+    }
+}
+
+// Carousel prev/active/next photos
+[data-aos="carousel-prev"] {
+    transform: translate(-16%, -4%) rotate(-3deg) scale(0.8);
+    opacity: 0;
+    transition-duration: 1.6s;
+    transition-delay: 450ms;
+
+    &.aos-animate {
+        transform: translate(-9%, -1%) rotate(-1deg) scale(0.9);
+        opacity: 1;
+    }
+}
+[data-aos="carousel-active"] {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-delay: 400ms;
+
+    &.aos-animate {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+[data-aos="carousel-next"] {
+    transform: translate(16%, -4%) rotate(3deg) scale(0.8);
+    opacity: 0;
+    transition-duration: 1.6s;
+    transition-delay: 500ms;
+
+    &.aos-animate {
+        transform: translate(9%, -1%) rotate(1deg) scale(0.9);
+        opacity: 1;
+    }
+}
+
+
+// Scale down and Fade in
+[data-aos="scale-down-fade-in"] {
+    transform: scale(1.1);
+    opacity: 0;
+    transition: transform 2s $ease-quart, opacity 2s $ease-quart;
+    will-change: transform, opacity;
+
+    &.aos-animate {
+        transform: scale(1);
+        opacity: 1;
     }
 }
 
@@ -61,27 +111,33 @@
     100% { transform: rotate(360deg); }
 }
 
-// Spinning globe (small)
+
+/*
+** Spinning globe
+*/
+@keyframes moveContinents {
+    0% { transform: translate(0,0); }
+    100% { transform: translate(-80.26px, 28.2px); }
+}
+.anim-spinGlobe {
+    animation: moveContinents 1.7s linear infinite;
+    animation-play-state: paused;
+}
+// Small
 @keyframes moveContinentsSmall {
-    0% { transform: translate3d(0,0,0); }
+    0% { transform: translate(0,0); }
-    100% { transform: translate3d(-96.95px, 0, 0); }
+    100% { transform: translate(-96.95px, 0); }
 }
 .anim-spinGlobeSmall {
     animation: moveContinentsSmall 1.5s linear infinite;
     animation-play-state: paused;
 }
 
-// Spinning globe
-@keyframes moveContinents {
-    0% { transform: translate3d(0,0,0); }
-    100% { transform: translate3d(-80.26px, 28.2px, 0); }
-}
-.anim-spinGlobe {
-    animation: moveContinents 1.7s linear infinite;
-    animation-play-state: paused;
-}
 
-// Layout: List
+/*
+** Layout
+*/
+// List
 @keyframes layoutListOdd {
     0% { transform: translateX(0); }
     100% { transform: translateX(4px); }
@@ -91,7 +147,7 @@
     100% { transform: translateX(-4px); }
 }
 
-// Layout: Grid
+// Grid
 @keyframes layoutGridOdd {
     0% { transform: translateY(0); }
     100% { transform: translateY(3px); }

src/style/atoms/_button-control.scss

@@ -14,6 +14,7 @@
     cursor: pointer;
     outline: none;
     transition: background-color 350ms $ease-quart;
+    will-change: background-color;
 
     @include breakpoint (sm) {
         width: 56px;
@@ -22,11 +23,12 @@
 
     // Icon
     .icon {
+        overflow: hidden;
         display: block;
         width: 13px;
         height: auto;
         transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
-        overflow: hidden;
+        will-change: transform;
 
         @include breakpoint (sm) {
             width: 20px;
@@ -72,34 +74,34 @@
     // To left
     &.dir-left {
         .icon[aria-hidden] {
-            transform: translate3d(100%, -50%, 0);
+            transform: translate(100%, -50%);
         }
 
         &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
-                transform: translate3d(-100%, 0, 0);
+                transform: translate(-100%, 0);
             }
             .icon[aria-hidden] {
                 opacity: 1;
-                transform: translate3d(-50%, -50%, 0);
+                transform: translate(-50%, -50%);
             }
         }
     }
     // To right
     &.dir-right {
         .icon[aria-hidden] {
-            transform: translate3d(-150%, -50%, 0);
+            transform: translate(-150%, -50%);
         }
 
         &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
-                transform: translate3d(100%, 0, 0);
+                transform: translate(100%, 0);
             }
             .icon[aria-hidden] {
                 opacity: 1;
-                transform: translate3d(-50%, -50%, 0);
+                transform: translate(-50%, -50%);
             }
         }
     }
@@ -107,17 +109,17 @@
     &.dir-top {
         .icon[aria-hidden] {
             left: auto;
-            transform: translate3d(0, -150%, 0);
+            transform: translate(0, -150%);
         }
 
         &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
-                transform: translate3d(0, 100%, 0);
+                transform: translate(0, 100%);
             }
             .icon[aria-hidden] {
                 opacity: 1;
-                transform: translate3d(0, -50%, 0);
+                transform: translate(0, -50%);
             }
         }
     }
@@ -125,17 +127,17 @@
     &.dir-bottom {
         .icon[aria-hidden] {
             left: auto;
-            transform: translate3d(0, 150%, 0);
+            transform: translate(0, 150%);
         }
 
         &:hover, &:focus {
             .icon:not([aria-hidden]) {
                 opacity: 0;
-                transform: translate3d(0, -100%, 0);
+                transform: translate(0, -100%);
             }
             .icon[aria-hidden] {
                 opacity: 1;
-                transform: translate3d(0, -50%, 0);
+                transform: translate(0, -50%);
             }
         }
     }
@@ -149,6 +151,7 @@
         overflow: visible;
         background-color: rgba($color-lightpurple, 0.5);
         transition: background-color 150ms $ease-inout;
+        will-change: background-color;
 
         // Icon
         svg[fill] {
@@ -175,6 +178,7 @@
             animation-play-state: paused;
             animation-delay: 50ms;
             transition: stroke 150ms $ease-inout;
+            will-change: stroke;
         }
 
         // Hover

src/style/atoms/_button-outline.scss

@@ -1,21 +1,22 @@
 // Button: Outline
 .button-outline {
+    overflow: hidden;
     position: relative;
     display: inline-flex;
     align-items: center;
     height: 32px;
     padding: 1px 16px 0;
+    background: none;
     font-family: $font-sans-sb;
     font-size: rem(14px);
     color: #fff;
-    background: none;
     border: 2px solid #fff;
     border-radius: 50vh;
-    overflow: hidden;
     text-decoration: none;
     cursor: pointer;
     outline: none;
     transition: all 275ms $ease-cubic;
+    will-change: border, color;
 
     @include breakpoint (sm) {
         height: 40px;
@@ -36,11 +37,12 @@
         top: 50%;
         left: 0;
         right: 0;
-        transform: translate3d(0, -120%, 0);
+        transform: translateY(-120%);
     }
 
     span, &:after {
-        transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
+        transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
+        will-change: transform, opacity;
     }
 
     // Disabled
@@ -56,11 +58,11 @@
 
         span {
             opacity: 0;
-            transform: translate3d(0, 100%, 0);
+            transform: translateY(100%);
         }
         &:after {
             opacity: 1;
-            transform: translate3d(0, -50%, 0);
+            transform: translateY(-50%);
         }
     }
 }

src/style/atoms/_button.scss

@@ -16,6 +16,7 @@
     outline: none;
     cursor: pointer;
     transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
+    will-change: background-color, color;
 
     @include breakpoint (sm) {
         height: 48px;
@@ -58,10 +59,11 @@
         top: 50%;
         left: 0;
         width: 100%;
-        transform: translate3d(0, -120%, 0);
+        transform: translateY(-120%);
     }
     span, &:after {
-        transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
+        transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
+        will-change: transform, opacity;
     }
 
     // Button has an icon (offset the hovered text)
@@ -86,14 +88,14 @@
         }
         span {
             opacity: 0;
-            transform: translate3d(0, 100%, 0);
+            transform: translateY(100%);
         }
         &:after {
             opacity: 1;
-            transform: translate3d(0, -47%, 0);
+            transform: translateY(-47%);
 
             @include breakpoint (sm) {
-                transform: translate3d(0, -50%, 0);
+                transform: translateY(-50%);
             }
         }
     }

src/style/atoms/_toggle.scss

@@ -20,6 +20,7 @@
         justify-content: center;
         outline: none;
         transition: color 150ms $ease-inout;
+        will-change: color;
     }
     button {
         span {
@@ -80,6 +81,7 @@
         height: 100%;
         background-color: $color-primary;
         transition: all 500ms $ease-quart;
+        will-change: width, left;
 
         span {
             content: attr(data-text);

src/style/molecules/_pagination.scss

@@ -45,6 +45,7 @@
                 line-height: 0.85;
                 transform: translate3d(0, -190%, 0);
                 transition: transform 250ms $ease-cubic;
+                will-change: transform;
             }
         }
 

src/style/molecules/_photo.scss

@@ -84,7 +84,7 @@
                 background-color: $color-primary;
                 display: block;
                 z-index: 3;
-                transition: all 150ms ease-in-out;
+                transition: opacity 150ms $ease-inout;
             }
         }
 

src/style/organisms/_photos.scss

@@ -105,6 +105,12 @@
                     }
                 }
             }
+
+            // Number
+            &__image--number {
+                transform: translate(-50%, var(--translate));
+                will-change: transform;
+            }
         }
 
         // Pagination

src/style/tools/_mixins.scss

@@ -28,19 +28,19 @@
 // Center vertically
 @mixin center-y {
     top: 50%;
-    transform: translate3d(0,-50%,0);
+    transform: translate(0, -50%);
 }
 
 // Center horizontally
 @mixin center-x {
     left: 50%;
-    transform: translate3d(-50%,0,0);
+    transform: translate(-50%, 0);
 }
 
 // Center vertically and horizontally
 @mixin center-xy {
     top: 50%; left: 50%;
-    transform: translate3d(-50%,-50%,0);
+    transform: translate(-50%, -50%);
 }
 
 // Smooth fonts