🚧 Switch to monorepo with Turbo

apps/website/src/animations/crossfade.ts

@@ -0,0 +1,27 @@
+import { crossfade } from 'svelte/transition'
+import { quartOut } from 'svelte/easing'
+
+// Crossfade transition
+export const [send, receive] = crossfade({
+    // duration: 1200,
+    duration: d => Math.sqrt(d * 200),
+    fallback (node, params) {
+        const {
+            duration = 600,
+            easing = quartOut,
+            start = 0.85
+        } = params
+        const style = getComputedStyle(node)
+        const transform = style.transform === 'none' ? '' : style.transform
+        const sd = 1 - start
+
+        return {
+            duration,
+            easing,
+            css: (t, u) => `
+                transform: ${transform} scale(${1 - (sd * u)});
+                opacity: ${t}
+            `
+        }
+    }
+})

apps/website/src/animations/easings.ts

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

apps/website/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,
+    })
+}

apps/website/src/animations/transitions.ts

@@ -0,0 +1,60 @@
+import { animate, stagger } from 'motion'
+import type { TransitionConfig } from 'svelte/transition'
+import { quartOut } from './easings'
+
+
+/**
+ * Scale and fade
+ */
+export const scaleFade = (node: HTMLElement, {
+    scale = [0.7, 1],
+    opacity = [1, 0],
+    x = null,
+    delay = 0,
+    duration = 1,
+}): TransitionConfig => {
+    return {
+        css: () => {
+            animate(node, {
+                scale,
+                opacity,
+                x,
+                z: 0,
+            }, {
+                easing: quartOut,
+                duration,
+                delay,
+            })
+
+            return null
+        }
+    }
+}
+
+
+/**
+ * Scale and fade split text
+ */
+export const revealSplit = (node: HTMLElement, {
+    opacity = [0, 1],
+    y = ['110%', '0%'],
+    children = '.char',
+    duration = 1,
+    delay = 0,
+}): TransitionConfig => {
+    return {
+        css: () => {
+            animate(node.querySelectorAll(children), {
+                opacity,
+                y,
+                z: 0,
+            }, {
+                easing: quartOut,
+                duration,
+                delay: stagger(0.04, { start: delay }),
+            })
+
+            return null
+        }
+    }
+}