WIP Animations all over site

- Run a transition In for each page - Involve a "loader" panel on page change - TODO: tweak the animations and finish the concept
2020-03-06 14:22:51 +01:00
parent cd1033f97b
commit 9ffc210c02
27 changed files with 827 additions and 296 deletions
--- a/src/animations/index.js
+++ b/src/animations/index.js
@@ -0,0 +1,121 @@
+import anime from 'animejs'
+import ScrollOut from 'scroll-out'
+import { animDuration } from '../utils/store'
+import { debounce } from '../utils/functions'
+
+
+/*
+** Transition In
+*/
+export const animateIn = () => {
+    // Title: Houses
+    const titleHouses = ScrollOut({
+        once: true,
+        targets: '#title-houses',
+        onShown (el) {
+            // Reveal
+            anime({
+                targets: el.querySelectorAll('span'),
+                translateY: ['-70%', 0],
+                delay: anime.stagger(80),
+                duration: animDuration,
+                easing: 'easeOutQuart'
+            })
+
+            // Parallax on scroll
+            const translate = anime.timeline({
+                autoplay: false,
+                duration: animDuration
+            })
+            translate.add({
+                targets: el,
+                translateX: ['-3%', '-17%'],
+                easing: 'easeOutQuart',
+                duration: animDuration
+            })
+            window.addEventListener('scroll', fn.debounce(event => {
+                translate.seek(translate.duration * (window.scrollY / 1000))
+            }), 50)
+        }
+    })
+
+    // Intro: Description
+    const introDescription = ScrollOut({
+        once: true,
+        targets: '#intro-description',
+        onShown (el) {
+            anime({
+                targets: el.querySelectorAll('p, a'),
+                opacity: [0, 1],
+                translateY: [8, 0],
+                duration: animDuration,
+                delay: anime.stagger(200, { start: 400 }),
+                easing: 'easeOutQuart'
+            })
+        }
+    })
+
+    // Intro: Carousel
+    const introCarousel = ScrollOut({
+        once: true,
+        targets: '#intro-carousel',
+        onShown(el) {
+            anime({
+                targets: el,
+                opacity: [0, 1],
+                translateY: [24, 0],
+                duration: animDuration,
+                delay: 650,
+                easing: 'easeOutQuart'
+            })
+        }
+    })
+
+    // Title: Of
+    const titleOf = ScrollOut({
+        once: true,
+        targets: '#title-of',
+        onShown (el) {
+            anime({
+                targets: el.querySelectorAll('span'),
+                translateY: ['100%', 0],
+                delay: anime.stagger(70),
+                duration: animDuration,
+                easing: 'easeOutQuart'
+            })
+        }
+    })
+
+    // Title: World
+    const titleWorld = ScrollOut({
+        once: true,
+        targets: '#title-world',
+        onShown (el, ctx) {
+            anime({
+                targets: el.querySelectorAll('span'),
+                translateY: ['100%', 0],
+                delay: anime.stagger(70),
+                duration: animDuration,
+                easing: 'easeOutQuart'
+            })
+
+            // Parallax on scroll
+            const translate = anime.timeline({
+                autoplay: false,
+                duration: animDuration
+            })
+            translate.add({
+                targets: el,
+                translateX: ['4%', '-4%'],
+                easing: 'easeOutQuart',
+                duration: animDuration
+            })
+
+            if (ctx.visible) {
+                window.addEventListener('scroll', debounce(event => {
+                    translate.seek(translate.duration * (window.scrollY / 1000))
+                }), 35)
+            }
+        }
+    })
+}