Viewer: Add intro animation, Visual fixes (WIP)

src/animations/viewer.js

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