Cleanup

src/animations/index.js

@@ -89,7 +89,7 @@ export const animateIn = () => {
     const titleWorld = ScrollOut({
         once: true,
         targets: '#title-world',
-        onShown (el, ctx) {
+        onShown (el) {
             anime({
                 targets: el.querySelectorAll('span'),
                 translateY: ['100%', 0],

src/molecules/Photo.svelte

@@ -27,23 +27,6 @@
     */
     onMount(() => {
         animateIn(scope)
-
-        // Parallax on photo when the image has been loaded
-        // const parallaxNumber = basicScroll.default.create({
-        //     elem: photoElement.querySelector('.photo__number'),
-        //     direct: photoElement,
-        //     from: 'top-bottom',
-        //     to: 'bottom-top',
-        //     props: {
-        //         '--translate': {
-        //             from: '-75%',
-        //             to: '-25%'
-        //         }
-        //     }
-        // })
-        // parallaxNumber.start()
-        // parallaxNumber.calculate()
-        // parallaxNumber.update()
     })
 </script>
 
@@ -69,8 +52,8 @@
                     <source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}>
                     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
                         data-src="{getThumbnail(photo.image.private_hash, 900)}"
-                        width={defaultWidth} height={defaultHeight}
                         alt={imgAlt}
+                        width={defaultWidth} height={defaultHeight}
                         class="lazyload"
                     >
 

src/organisms/Carousel.svelte

@@ -125,17 +125,6 @@
         // Send current photo to event for init
         sendCurrentPhoto({ init: true })
     })
-
-
-    /*
-    ** TODO: REVEAL ANIMATION ON CAROUSEL
-    ** Fix the CSS priority? Cancel the transition delay and duration?
-        data-aos="{
-            (photo === prevPhoto) ? 'carousel-prev' :
-            (photo === currentPhoto) ? 'carousel-active' :
-            (photo === nextPhoto) ? 'carousel-next' : ''
-        }
-    */
 </script>
 
 <svelte:window on:keydown={keyboardNav} />

src/style/_animations.scss

@@ -31,158 +31,6 @@
     }
 }
 
-// Translate each letter from a direction
-// [data-aos="letters-translate-top"],
-// [data-aos="letters-translate-bottom"] {
-//     white-space: nowrap;
-
-//     span {
-//         display: inline-block;
-//         transition: transform 1s $ease-quart;
-//         will-change: transform;
-
-
-//         @for $i from 1 to 8 {
-//             &:nth-child(#{$i}) {
-//                 transition-delay: $i * 40ms;
-//             }
-//         }
-//     }
-
-//     &.aos-animate {
-//         span {
-//             transform: translate(0, 0);
-//         }
-//     }
-// }
-// [data-aos="letters-translate-top"] {
-//     span {
-//         transform: translate(0, -100%);
-//     }
-// }
-// [data-aos="letters-translate-bottom"] {
-//     span {
-//         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: 0.45s;
-
-//     &.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: 0.4s;
-
-//     &.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: 0.5s;
-
-//     &.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;
-//     }
-// }
-
-
-// // Place title reveal
-// [data-aos="place-title"] {
-//     .anim-fade {
-//         opacity: 0;
-//         transition: opacity 0.9s $ease-inout;
-//         transition-delay: 1.8s;
-//         will-change: opacity;
-//     }
-//     .anim-translate {
-//         transform: translateY(120%);
-//         transition: transform 0.9s $ease-quart;
-//         transition-delay: 1.8s;
-//         will-change: transform;
-//     }
-//     .place__title_of {
-//         transition-delay: 2.0s;
-//     }
-//     .place__title_name {
-//         transition-delay: 2.1s;
-//     }
-//     .button-control {
-//         transition-delay: 2.2s;
-//         transition-duration: 0.6s;
-//     }
-
-//     &.aos-animate {
-//         .anim-fade {
-//             opacity: 1;
-//         }
-//         .anim-translate {
-//             transform: translateY(0);
-//         }
-//     }
-// }
-
-// // Location reveal
-// [data-aos="location"] {
-//     img {
-//         opacity: 0;
-//         transform: scale(1.15);
-//         transition: opacity 0.6s $ease-quart, transform 0.6s $ease-quart;
-//         will-change: opacity, transform;
-//     }
-
-//     h3, p {
-//         transform: translateY(150%);
-//         transition: transform 0.6s $ease-quart;
-//         will-change: transform;
-//     }
-//     h3 {
-//         transition: all 0.6s $ease-quart;
-//         transition-delay: 0.1s;
-//     }
-//     p {
-//         transition-delay: 0.2s;
-//     }
-
-//     &.aos-animate {
-//         img {
-//             opacity: 1;
-//             transform: scale(1);
-//         }
-//         h3, p {
-//             transform: translateY(0);
-//         }
-//     }
-// }
-
 
 
 /* ==========================================================================