[wip] Switch from Anime to Motion One for page animations

src/animations/easings.ts

@@ -1,7 +1,10 @@
+import type { Easing } from 'motion'
+
+
 /**
  * Ease: Quart Out Array
  */
-export const quartOut = [.165, .84, .44, 1]
+export const quartOut: Easing = [.165, .84, .44, 1]
 
 
 /**

src/animations/reveal.ts

@@ -0,0 +1,45 @@
+import { animate, inView, stagger } from 'motion'
+import { quartOut } from '$animations/easings'
+
+const defaultOptions = {
+    stagger: null,
+    delay: 0,
+    duration: 1.6,
+    easing: quartOut,
+}
+
+export default (node: Element | any, {
+    enable = true,
+    children = undefined,
+    animation = [],
+    options = defaultOptions,
+}: RevealOptions) => {
+    if (!enable) return
+
+    // Define targets from children, if empty get node
+    const targets = children ? node.querySelectorAll(children) : [node]
+
+    // If animation has opacity starting with 0, hide it first
+    if (animation.opacity && animation.opacity[0] === 0) {
+        targets.forEach((el: HTMLElement) => el.style.opacity = '0')
+    }
+
+    // Create inView instance
+    inView(node, ({ isIntersecting }) => {
+        const anim = animate(
+            targets,
+            animation,
+            {
+                delay: options.stagger ? stagger(options.stagger, { start: options.delay }) : options.delay,
+                duration: options.duration,
+                easing: options.easing,
+            }
+        )
+        anim.stop()
+
+        // Run animation if in view and tab is active
+        isIntersecting && requestAnimationFrame(anim.play)
+    }, {
+        amount: options.threshold,
+    })
+}