Page and components animations rework WIP

2020-04-03 23:03:00 +02:00
parent 7e0d1e33fb
commit 462359fcf2
10 changed files with 147 additions and 261 deletions
--- a/src/animations/Carousel.js
+++ b/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,
-        delay: transitionDelay
+        duration: animDuration
    })
+
    // 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]
-    }, 550)
+        translateX: [64, 0],
+        rotate: [-2, 0]
+    }, 100)
    // Photo: Next
    tl.add({
        targets: scope.querySelector('.is-next picture'),
        translateY: [8, 0],
-        translateX: [-48, 0]
-    }, 550)
+        translateX: [-48, 0],
+        rotate: [2, 0]
+    }, 150)

+    // Reveal on scroll
    const carouselIn = ScrollOut({
        once: true,
        targets: scope,
--- a/src/animations/Locations.js
+++ b/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
-            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()
+            tl.restart()
        }
    })
 }
--- a/src/animations/Photo.js
+++ b/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'),
--- a/src/animations/TitleSite.js
+++ b/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) {
-            // 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'
-            })
-        }
+        onShown: () => tl.restart()
    })
 }
--- a/src/animations/Transition.js
+++ b/src/animations/Transition.js
@@ -1,75 +1,16 @@
-import anime from 'animejs'
-import { transitionNormal, transitionLong, transitionPanelIn } from 'utils/store'
+import { quartInOut } from 'svelte/easing'


 /*
-** Transition In
+** Animation Out: Background
 */
-export const animateIn = scope => {
-    const tl = anime.timeline({
-        duration: transitionPanelIn,
-        easing: 'easeInOutQuart',
-        begin: () => {
-            // Show the panel
-            scope.classList.remove('hidden')
-        }
-    })
-
-    // 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()
+export const panelBackgroundOut = (node, params) => {
+    return {
+        delay: params.delay || 0,
+        duration: params.duration || 400,
+        easing: params.easing || quartInOut,
+        css: (t, u) => `
+            transform: scaleY(${t})
+        `
+    }
 }
--- a/src/animations/crossfade.js
+++ b/src/animations/crossfade.js
@@ -13,9 +13,9 @@ export const [send, receive] = crossfade({
            duration: 600,
            easing: quartOut,
            css: t => `
-					transform: ${transform} scale(${t});
-					opacity: ${t}
-				`
+                transform: ${transform} scale(${t});
+                opacity: ${t}
+            `
        }
    }
 })
--- a/src/animations/index.js
+++ b/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({
-    //     once: true,
-    //     targets: '#title-houses',
-    //     onShown (el) {
-            // Reveal each letter
-    anime({
+    const titleHouses = anime({
        targets: document.querySelectorAll('#title-houses span'),
        translateY: ['-70%', 0],
-        delay: anime.stagger(80, { start: transitionDelay }),
-        duration: transitionNormal,
+        delay: anime.stagger(80, { start: animDelay }),
+        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({
-    //     once: true,
-    //     targets: '#intro-description',
-    //     onShown (el) {
-    anime({
-        targets: '#intro-description p, #intro-description a',
+    const introDescription = anime({
+        targets: document.getElementById('intro-description').querySelectorAll('p, a'),
        opacity: [0, 1],
        translateY: [8, 0],
        easing: 'easeOutQuart',
-        duration: transitionNormal,
-        delay: anime.stagger(200, { start: transitionDelay + 400 })
+        duration: animDuration,
+        delay: anime.stagger(200, { start: animDelay + 200 })
    })
-    //     }
-    // })

-    // Intro: Carousel
-    // const introCarousel = ScrollOut({
-    //     once: true,
-    //     targets: '#intro-carousel',
-    //     onShown (el) {
-    anime({
+    // Intro: Carousel revealing (scroll)
+    const introCarousel = ScrollOut({
+        once: true,
        targets: '#intro-carousel',
-        opacity: [0, 1],
-        translateY: [24, 0],
-        easing: 'easeOutQuart',
-        duration: transitionNormal,
-        delay: transitionDelay + 600,
-        complete: event => event.animatables[0].target.removeAttribute('style')
+        onShown (el) {
+            anime({
+                targets: '#intro-carousel',
+                opacity: [0, 1],
+                translateY: [24, 0],
+                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({
-                targets: el.querySelectorAll('span'),
-                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)
+            window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
+            setTimeout(() => parallaxAnime(el, titleWorldTranslate), 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'
-    })
-}
--- a/src/animations/page.js
+++ b/src/animations/page.js
@@ -1,6 +1,5 @@
 import anime from 'animejs'
-import ScrollOut from 'scroll-out'
-import { transitionNormal, transitionDelay } from 'utils/store'
+import { animDuration, animDelay } 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,
-        delay: anime.stagger(220, { start: transitionDelay }),
+        duration: animDuration,
+        delay: anime.stagger(220, { start: animDelay }),
    })
-    //     }
-    // })
 }
--- a/src/animations/place.js
+++ b/src/animations/place.js
@@ -1,6 +1,5 @@
 import anime from 'animejs'
-// import ScrollOut from 'scroll-out'
-import { transitionNormal, transitionDelay } from 'utils/store'
+import { animDuration, animDelay } from 'utils/store'


 /*
@@ -8,54 +7,45 @@ import { transitionNormal, transitionDelay } from 'utils/store'
 */
 export const animateIn = () => {
    const tl = anime.timeline({
-        duration: 1800,
-        delay: transitionDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
+        duration: animDuration,
+        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],
-        duration: transitionNormal
-    }, 200)
+        translateY: ['150%', 0]
+    })
    // Title: Of
    tl.add({
        targets: '.place__title_of',
-        opacity: [0, 1],
-        duration: transitionNormal
-    }, 800)
+        opacity: [0, 1]
+    }, 600)
    // Title: Place name
    tl.add({
        targets: '.place__title_name',
-        translateY: ['150%', 0],
-        duration: transitionNormal
-    }, 350)
+        translateY: ['150%', 0]
+    }, 150)

    // Switcher link
    tl.add({
        targets: '.place__title .button-control',
        scale: [0.95, 1],
-        opacity: [0, 1],
-        duration: transitionNormal
-    }, 700)
+        opacity: [0, 1]
+    }, 500)

    // Illustration
    tl.add({
        targets: '.place__illustration',
        scale: [1.075, 1],
-        opacity: [0, 1],
-        duration: transitionNormal
-    }, 200)
+        opacity: [0, 1]
+    }, 0)

    // Description
    tl.add({
        targets: '.place__description',
        opacity: [0, 1],
-        translateY: [24, 0],
-        duration: transitionNormal
-    }, 650)
-
-    // Play
-    tl.play()
+        translateY: [24, 0]
+    }, 450)
 }
--- a/src/animations/viewer.js
+++ b/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%'],
-        duration: transitionNormal,
-        delay: 300,
-        easing: 'easeOutQuart'
-    })
+        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%']
+    }, 300)

    // Carousel: Number
-    anime({
+    tl.add({
        targets: '.viewer .carousel__number_column',
        opacity: [0, 1],
        marginTop: [24, 0],
-        duration: transitionNormal,
-        delay: anime.stagger(100, { start: 450 }),
-        easing: 'easeOutQuart'
-    })
+        delay: anime.stagger(100)
+    }, 450)
 }