Page and components animations rework WIP

src/animations/Carousel.js

@@ -1,36 +1,38 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionNormal, transitionDelay } from 'utils/store'
+import { animDuration, animDelay } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Timeline
     const tl = anime.timeline({
         easing: 'easeOutQuart',
-        duration: transitionNormal,
+        duration: animDuration
-        delay: transitionDelay
     })
+
     // Photo: Active
     tl.add({
         targets: scope.querySelector('.is-active picture'),
         translateY: [32, 0]
-    }, 400)
+    })
     // Photo: Prev
     tl.add({
         targets: scope.querySelector('.is-prev picture'),
         translateY: [8, 0],
-        translateX: [64, 0]
+        translateX: [64, 0],
-    }, 550)
+        rotate: [-2, 0]
+    }, 100)
     // Photo: Next
     tl.add({
         targets: scope.querySelector('.is-next picture'),
         translateY: [8, 0],
-        translateX: [-48, 0]
+        translateX: [-48, 0],
-    }, 550)
+        rotate: [2, 0]
+    }, 150)
 
+    // Reveal on scroll
     const carouselIn = ScrollOut({
         once: true,
         targets: scope,

src/animations/Locations.js

@@ -1,47 +1,46 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionLong } from 'utils/store'
+import { animDurationLong } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Each location
+    const tl = anime.timeline({
+        autoplay: false,
+        duration: 600,
+        delay: anime.stagger(200),
+        easing: 'easeOutQuart'
+    })
+
+    // Image
+    tl.add({
+        targets: scope.querySelector('img'),
+        scale: [1.3, 1],
+        opacity: [0, 1],
+        duration: 1800,
+        delay: 100
+    })
+
+    // Name
+    tl.add({
+        targets: scope.querySelector('h3'),
+        translateY: ['100%', 0]
+    }, 300)
+
+    // Country
+    tl.add({
+        targets: scope.querySelector('p'),
+        translateY: ['100%', 0]
+    }, 550)
+
+
+    // Each location (reveal on scroll)
     const locations = ScrollOut({
         targets: scope.querySelectorAll('.location'),
         onShown (el) {
-            // Timeline
+            tl.restart()
-            const tl = anime.timeline({
-                autoplay: false,
-                duration: 600,
-                delay: anime.stagger(200),
-                easing: 'easeOutQuart'
-            })
-
-            // Image
-            tl.add({
-                targets: el.querySelector('img'),
-                scale: [1.3, 1],
-                opacity: [0, 1],
-                duration: 1800,
-                delay: 100
-            })
-
-            // Name
-            tl.add({
-                targets: el.querySelector('h3'),
-                translateY: ['100%', 0]
-            }, 300)
-
-            // Country
-            tl.add({
-                targets: el.querySelector('p'),
-                translateY: ['100%', 0]
-            }, 550)
-
-            // Play
-            tl.play()
         }
     })
 }

src/animations/Photo.js

@@ -9,7 +9,7 @@ import { parallaxAnime } from 'utils/functions'
 ** Transition In
 */
 export const animateIn = scope => {
-    // Title appearing
+    // Title (reveal on scroll)
     const titleReveal = ScrollOut({
         once: true,
         targets: scope,
@@ -25,7 +25,7 @@ export const animateIn = scope => {
         }
     })
 
-    // Photo appearing
+    // Photo (reveal on scroll)
     const photoReveal = ScrollOut({
         once: true,
         targets: scope.querySelector('.photo__image'),

src/animations/TitleSite.js

@@ -1,34 +1,27 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionDelay } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = (scope, init) => {
+    const tl = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: 1000
+    })
+
+    // Stagger each letters and words
+    tl.add({
+        targets: scope.querySelectorAll('span, em span'),
+        translateY: ['100%', 0],
+        delay: anime.stagger(40),
+    })
+
     // On scroll animation
     const title = ScrollOut({
         once: true,
         targets: scope,
-        onShown (el) {
+        onShown: () => tl.restart()
-            // Each letters
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(40, { start: init ? 0 : transitionDelay }),
-                duration: 1000
-            })
-
-            // Word in between
-            anime({
-                targets: el.querySelectorAll('em span'),
-                opacity: [0, 1],
-                delay: anime.stagger(80, { start: (init ? 0 : transitionDelay) + 400 }),
-                duration: 1000,
-                easing: 'easeOutQuart'
-            })
-        }
     })
 }

src/animations/Transition.js

@@ -1,75 +1,16 @@
-import anime from 'animejs'
+import { quartInOut } from 'svelte/easing'
-import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
 
 
 /*
-** Transition In
+** Animation Out: Background
 */
-export const animateIn = scope => {
+export const panelBackgroundOut = (node, params) => {
-    const tl = anime.timeline({
+    return {
-        duration: transitionPanelIn,
+        delay: params.delay || 0,
-        easing: 'easeInOutQuart',
+        duration: params.duration || 400,
-        begin: () => {
+        easing: params.easing || quartInOut,
-            // Show the panel
+        css: (t, u) => `
-            scope.classList.remove('hidden')
+            transform: scaleY(${t})
-        }
+        `
-    })
+    }
-
-    // Panel itself
-    tl.add({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 1],
-        opacity: [0, 1],
-        duration: transitionPanelIn
-    }, 0)
-    // Globe icon
-    tl.add({
-        targets: scope.querySelector('svg'),
-        opacity: [0, 1],
-        translateY: ['3vh', 0],
-        duration: transitionPanelIn
-    }, 0)
-}
-
-
-/*
-** Transition Out
-*/
-export const animateOut = (scope, callback) => {
-    const tl = anime.timeline({
-        easing: 'easeInOutQuart',
-        complete: () => {
-            // Hide the panel
-            scope.classList.add('hidden')
-
-            // Run callback
-            callback()
-        }
-    })
-
-    // Background
-    tl.add({
-        targets: scope.querySelector('.transition__background'),
-        scaleY: [1, 0],
-        duration: transitionLong
-    }, 600)
-
-    // Title
-    tl.add({
-        targets: scope.querySelector('.title-location'),
-        opacity: [1, 0],
-        translateY: [0, '-50vh'],
-        duration: transitionNormal
-    }, 850)
-
-    // Globe icon
-    tl.add({
-        targets: scope.querySelector('svg'),
-        opacity: [1, 0],
-        translateY: [0, '-50vh'],
-        duration: transitionNormal
-    }, 850)
-
-    // Play
-    tl.play()
 }

src/animations/crossfade.js

@@ -13,9 +13,9 @@ export const [send, receive] = crossfade({
             duration: 600,
             easing: quartOut,
             css: t => `
-					transform: ${transform} scale(${t});
+                transform: ${transform} scale(${t});
-					opacity: ${t}
+                opacity: ${t}
-				`
+            `
         }
     }
 })

src/animations/index.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionNormal, transitionLong, transitionDelay } from 'utils/store'
+import { animDuration, animDelay } from 'utils/store'
 import { throttle, parallaxAnime } from 'utils/functions'
 
 
@@ -9,16 +9,11 @@ import { throttle, parallaxAnime } from 'utils/functions'
 */
 export const animateIn = () => {
     // Title: Houses
-    // const titleHouses = ScrollOut({
+    const titleHouses = anime({
-    //     once: true,
-    //     targets: '#title-houses',
-    //     onShown (el) {
-            // Reveal each letter
-    anime({
         targets: document.querySelectorAll('#title-houses span'),
         translateY: ['-70%', 0],
-        delay: anime.stagger(80, { start: transitionDelay }),
+        delay: anime.stagger(80, { start: animDelay }),
-        duration: transitionNormal,
+        duration: animDuration,
         easing: 'easeOutQuart'
     })
 
@@ -28,48 +23,39 @@ export const animateIn = () => {
         translateX: ['7%', '-15%'],
         easing: 'linear',
         autoplay: false,
-        duration: transitionNormal
+        duration: animDuration
     })
     window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
     setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
-    //     },
-    //     onHidden: () => window.removeEventListener('scroll', parallaxAnime)
-    // })
 
     // Intro: Description
-    // const introDescription = ScrollOut({
+    const introDescription = anime({
-    //     once: true,
+        targets: document.getElementById('intro-description').querySelectorAll('p, a'),
-    //     targets: '#intro-description',
-    //     onShown (el) {
-    anime({
-        targets: '#intro-description p, #intro-description a',
         opacity: [0, 1],
         translateY: [8, 0],
         easing: 'easeOutQuart',
-        duration: transitionNormal,
+        duration: animDuration,
-        delay: anime.stagger(200, { start: transitionDelay + 400 })
+        delay: anime.stagger(200, { start: animDelay + 200 })
     })
-    //     }
-    // })
 
-    // Intro: Carousel
+    // Intro: Carousel revealing (scroll)
-    // const introCarousel = ScrollOut({
+    const introCarousel = ScrollOut({
-    //     once: true,
+        once: true,
-    //     targets: '#intro-carousel',
-    //     onShown (el) {
-    anime({
         targets: '#intro-carousel',
-        opacity: [0, 1],
+        onShown (el) {
-        translateY: [24, 0],
+            anime({
-        easing: 'easeOutQuart',
+                targets: '#intro-carousel',
-        duration: transitionNormal,
+                opacity: [0, 1],
-        delay: transitionDelay + 600,
+                translateY: [24, 0],
-        complete: event => event.animatables[0].target.removeAttribute('style')
+                easing: 'easeOutQuart',
+                duration: animDuration,
+                delay: animDelay + 400,
+                complete: event => event.animatables[0].target.removeAttribute('style')
+            })
+        }
     })
-    //     }
-    // })
 
-    // Title: Of
+    // Title: Of (reveal on scroll)
     const titleOf = ScrollOut({
         once: true,
         targets: '#title-of',
@@ -79,51 +65,35 @@ export const animateIn = () => {
                 translateY: ['100%', 0],
                 easing: 'easeOutQuart',
                 delay: anime.stagger(70),
-                duration: transitionNormal
+                duration: animDuration
             })
         }
     })
 
-    // Title: World
+    // Title: World (reveal on scroll)
+    const titleWorldLetters = anime({
+        targets: scope.querySelectorAll('span'),
+        translateY: ['100%', 0],
+        easing: 'easeOutQuart',
+        delay: anime.stagger(70),
+        duration: animDuration,
+        autoplay: false
+    })
+    const titleWorldTranslate = anime({
+        targets: scope,
+        translateX: ['5%', '-3%'],
+        easing: 'linear',
+        autoplay: false,
+        duration: animDuration
+    })
+    // Reveal on scroll
     const titleWorld = ScrollOut({
         once: true,
         targets: '#title-world',
         onShown (el) {
-            anime({
+            window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
-                targets: el.querySelectorAll('span'),
+            setTimeout(() => parallaxAnime(el, titleWorldTranslate), 50)
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(70),
-                duration: transitionNormal
-            })
-
-            // Parallax on scroll
-            const translate = anime({
-                targets: el,
-                translateX: ['5%', '-3%'],
-                easing: 'linear',
-                autoplay: false,
-                duration: transitionNormal
-            })
-
-            window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
-            setTimeout(() => parallaxAnime(el, translate), 50)
         },
         onHidden: () => window.removeEventListener('scroll', parallaxAnime)
     })
 }
-
-
-
-/*
-** Transition Out
-*/
-export const animateOut = () => {
-    anime({
-        targets: document.querySelector('#title-houses'),
-        translateY: ['-70%', 0],
-        opacity: [1, 0],
-        duration: transitionNormal,
-        easing: 'easeOutQuart'
-    })
-}

src/animations/page.js

@@ -1,6 +1,5 @@
 import anime from 'animejs'
-import ScrollOut from 'scroll-out'
+import { animDuration, animDelay } from 'utils/store'
-import { transitionNormal, transitionDelay } from 'utils/store'
 
 
 /*
@@ -8,18 +7,12 @@ import { transitionNormal, transitionDelay } from 'utils/store'
 */
 export const animateIn = () => {
     // Simple slide and fade on each part of the page
-    // const page = ScrollOut({
-    //     once: true,
-    //     targets: '.page',
-    //     onShown (el) {
     anime({
         targets: document.querySelectorAll('.page__part'),
         opacity: [0, 1],
         translateY: [8, 0],
         easing: 'easeOutQuart',
-        duration: transitionNormal,
+        duration: animDuration,
-        delay: anime.stagger(220, { start: transitionDelay }),
+        delay: anime.stagger(220, { start: animDelay }),
     })
-    //     }
-    // })
 }

src/animations/place.js

@@ -1,6 +1,5 @@
 import anime from 'animejs'
-// import ScrollOut from 'scroll-out'
+import { animDuration, animDelay } from 'utils/store'
-import { transitionNormal, transitionDelay } from 'utils/store'
 
 
 /*
@@ -8,54 +7,45 @@ import { transitionNormal, transitionDelay } from 'utils/store'
 */
 export const animateIn = () => {
     const tl = anime.timeline({
-        duration: 1800,
+        duration: animDuration,
-        delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
+        delay: animDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
         easing: 'easeOutQuart'
     })
 
     // Title: Houses
     tl.add({
         targets: '.place__title_houses',
-        translateY: ['150%', 0],
+        translateY: ['150%', 0]
-        duration: transitionNormal
+    })
-    }, 200)
     // Title: Of
     tl.add({
         targets: '.place__title_of',
-        opacity: [0, 1],
+        opacity: [0, 1]
-        duration: transitionNormal
+    }, 600)
-    }, 800)
     // Title: Place name
     tl.add({
         targets: '.place__title_name',
-        translateY: ['150%', 0],
+        translateY: ['150%', 0]
-        duration: transitionNormal
+    }, 150)
-    }, 350)
 
     // Switcher link
     tl.add({
         targets: '.place__title .button-control',
         scale: [0.95, 1],
-        opacity: [0, 1],
+        opacity: [0, 1]
-        duration: transitionNormal
+    }, 500)
-    }, 700)
 
     // Illustration
     tl.add({
         targets: '.place__illustration',
         scale: [1.075, 1],
-        opacity: [0, 1],
+        opacity: [0, 1]
-        duration: transitionNormal
+    }, 0)
-    }, 200)
 
     // Description
     tl.add({
         targets: '.place__description',
         opacity: [0, 1],
-        translateY: [24, 0],
+        translateY: [24, 0]
-        duration: transitionNormal
+    }, 450)
-    }, 650)
-
-    // Play
-    tl.play()
 }

src/animations/viewer.js

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