Scope animations

src/animations/Carousel.js

@@ -6,11 +6,11 @@ import { animDuration } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = () => {
+export const animateIn = scope => {
     // Card: Active
     const cardActive = ScrollOut({
         once: true,
-        targets: '.gallery__photo--active',
+        targets: scope.querySelector('.gallery__photo--active'),
         onShown (el) {
             anime({
                 targets: el,
@@ -25,7 +25,7 @@ export const animateIn = () => {
     // Card: Prev
     const cardPrev = ScrollOut({
         once: true,
-        targets: '.gallery__photo--prev',
+        targets: scope.querySelector('.gallery__photo--prev'),
         onShown (el) {
             anime({
                 targets: el,
@@ -41,7 +41,7 @@ export const animateIn = () => {
     // Card: Prev
     const cardNext = ScrollOut({
         once: true,
-        targets: '.gallery__photo--next',
+        targets: scope.querySelector('.gallery__photo--next'),
         onShown (el) {
             anime({
                 targets: el,

src/animations/Locations.js

@@ -6,10 +6,10 @@ import { animDuration } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = () => {
+export const animateIn = scope => {
     // Each location
     const locations = ScrollOut({
-        targets: '#locations_list .location',
+        targets: scope.querySelectorAll('.location'),
         onShown (el) {
             // Timeline
             const tl = anime.timeline({

src/animations/TitleSite.js

@@ -6,11 +6,11 @@ import { animDuration } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = callback => {
+export const animateIn = scope => {
     // On scroll animation
     const title = ScrollOut({
         once: true,
-        targets: '.title-location--inline',
+        targets: scope,
         onShown (el) {
             // Each letters
             anime({

src/animations/Transition.js

@@ -5,21 +5,23 @@ import { animDuration, animDurationLong } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = () => {
+export const animateIn = scope => {
     // Panel itself
     const transition = anime({
-        targets: '#transition',
+        targets: scope,
         height: ['100%', '100%'],
+        scale: [1.1, 1],
         opacity: [0, 1],
-        duration: 200,
+        duration: 400,
         delay: 0,
         easing: 'easeInOutQuart'
     })
     // Globe icon
     const globe = anime({
-        targets: '#transition svg',
+        targets: scope.querySelector('svg'),
         opacity: [0, 1],
-        duration: 200,
+        translateY: [32, 0],
+        duration: 400,
         delay: 0,
         easing: 'easeInOutQuart'
     })
@@ -30,10 +32,10 @@ export const animateIn = () => {
 /*
 ** Transition Out
 */
-export const animateOut = callback => {
+export const animateOut = (scope, callback) => {
     // Panel itself
     const transition = anime({
-        targets: '#transition',
+        targets: scope,
         height: ['100%', 0],
         duration: animDurationLong,
         delay: 800,
@@ -43,7 +45,7 @@ export const animateOut = callback => {
 
     // Title
     const title = anime({
-        targets: '#transition .title-location',
+        targets: scope.querySelector('.title-location'),
         opacity: 0,
         duration: 600,
         delay: 1400,
@@ -52,7 +54,7 @@ export const animateOut = callback => {
 
     // Globe icon
     const globe = anime({
-        targets: '#transition svg',
+        targets: scope.querySelector('svg'),
         opacity: 0,
         duration: 600,
         delay: 1400,

src/atoms/TitleSite.svelte

@@ -5,17 +5,20 @@
     // Animations
     import { animateIn } from '../animations/TitleSite.js'
 
+    // Variables
+    let scope
+
 
     /*
     ** Run code on component mount
     */
     onMount(() => {
         // Entering transition
-        animateIn()
+        animateIn(scope)
     })
 </script>
 
-<div class="title-location title-location--inline">
+<div class="title-location title-location--inline" bind:this={scope}>
     <div role="heading" aria-level="1" aria-label="Houses">
         <div class="anim-mask">
             {@html lettersToSpan('Houses')}

src/molecules/Photo.svelte

@@ -9,7 +9,7 @@
     export let photo
     export let index
     export let layout = 'list'
-    let photoElement
+    let scope
 
     // Default size for the image
     const defaultWidth = 900
@@ -25,6 +25,7 @@
 	** Run code on browser only
 	*/
 	onMount(() => {
+        animateIn(scope)
         // Parallax on photo when the image has been loaded
         // const parallaxNumber = basicScroll.default.create({
         //     elem: photoElement.querySelector('.photo__number'),
@@ -48,6 +49,7 @@
     bind:this={photoElement}
     in:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
 >
+<div class="photo" bind:this={scope}>
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>

src/organisms/Carousel.svelte

@@ -18,6 +18,7 @@
     export let init = undefined
 
     // Variables
+    let scope
     let hover
     let currentIndex = 0
     $: currentPhoto = photos[currentIndex] || null
@@ -93,7 +94,7 @@
     */
     onMount(() => {
         // Entering transition
-        animateIn()
+        animateIn(scope)
 
         // Hover function
         hover = event => {
@@ -138,6 +139,7 @@
 <div class="carousel"
     on:touchstart={swipeStart}
     on:touchend={swipeEnd}
+    bind:this={scope}
 >
     <div class="wrap">
         <div class="gallery">

src/organisms/Locations.svelte

@@ -14,6 +14,7 @@
 
     // Variables
     const transitionDuration = 800
+    let list
     let filterLocations
     let continentsToDisplay = []
     let continentsFiltered = []
@@ -35,7 +36,7 @@
     */
     onMount(() => {
         // Entering transition
-        animateIn()
+        animateIn(list)
     })
 </script>
 
@@ -57,7 +58,7 @@
         {/each}
     </ul>
 
-    <div class="browse__locations" id="locations_list">
+    <div class="browse__locations" id="locations_list" bind:this={list}>
     {#each filteredLocations as location (location.id)}
         <div animate:flip="{{ duration: transitionDuration }}"
             in:receive="{{ key: location.id }}"

src/utils/Transition.svelte

@@ -20,13 +20,14 @@
     ** 3. Hide the loader with transition Out
     ** 4. The Loader runs the page transition In via pageTransition
     */
+    let scope
     let firstLoad = true
 
     // 1. Watch page change
     page.subscribe(() => {
         // Run the loader animation (only after first load)
         if (!firstLoad && process.browser) {
-            animateIn()
+            animateIn(scope)
         }
         // Set pageReady to false (?)
         pageReady.set(false)
@@ -40,10 +41,11 @@
                 window.scrollTo(0,0)
                 // 3. Hide the loader
                 // Also sets firstLoad to false in order to show the second icon afterwards
-                animateOut(() => firstLoad = false)
+                animateOut(scope, () => firstLoad = false)
-            }, 200) // This duration allows to not come over the transition In
+            }, 400) // This duration allows to not come over the transition In
             // [OU ALORS] les pages changent la valeur de loaded plus tard
 
+            // Scroll back to top of page
             // 4. Run the page's transition in, but a little bit before the end of the loader
             setTimeout(() => {
                 pageTransition.onAnimationEnd()
@@ -52,7 +54,7 @@
     })
 </script>
 
-<div class="transition" id="transition" aria-hidden="true">
+<div class="transition" id="transition" aria-hidden="true" bind:this={scope}>
     <div class="loader">
         {#if firstLoad}
         <TitleSite />