feat: Create gsap like wrapper prototype

willybrauner · Dec 28, 2024 · 2ebaf5b · 2ebaf5b
1 parent f530809
commit 2ebaf5b
Show file tree

Hide file tree

Showing 11 changed files with 417 additions and 9 deletions.
diff --git a/examples/interpol-psap/.gitignore b/examples/interpol-psap/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/interpol-psap/index.html b/examples/interpol-psap/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <title>interpol</title>
+  </head>
+  <body>
+    <div id="root">
+      <div class="App">
+        <div class="Controls">
+          <button class="play">play</button>
+          <button class="reverse">reverse</button>
+          <button class="pause">pause</button>
+          <button class="resume">resume</button>
+          <button class="stop">stop</button>
+          <button class="refresh">refresh</button>
+          <button class="seek-0">seek 0</button>
+          <button class="seek-05">seek .5</button>
+          <button class="seek-1">seek 1</button>
+          <input class="progress" value="0" type="number" />
+          <input class="slider" type="range" min="0" max="100" value="0" />
+        </div>
+        <div class="wrapper">
+          <div class="ball"></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/interpol-psap/package.json b/examples/interpol-psap/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "interpol-psap",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "vite --host"
+  },
+  "dependencies": {
+    "@wbe/interpol": "workspace:*"
+  },
+  "devDependencies": {
+    "less": "^4.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  }
+}
diff --git a/examples/interpol-psap/src/index.less b/examples/interpol-psap/src/index.less
@@ -0,0 +1,36 @@
+
+:root {
+  --color-gray: #454545;
+  --color-black-1: #313131;
+  --color-black: #171717;
+  --color-blue: #646cff;
+  --color-white: #fff;
+}
+
+html {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  color-scheme: dark;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  font-size: 16px;
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: hidden;
+  position: fixed;
+}
+
+.ball {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: red;
+}
diff --git a/examples/interpol-psap/src/main.ts b/examples/interpol-psap/src/main.ts
@@ -0,0 +1,83 @@
+import { Interpol } from "@wbe/interpol"
+import type { InterpolConstruct, PropsValues } from "@wbe/interpol"
+import "./index.less"
+
+/**
+ * Query
+ */
+const $element = document.querySelector<HTMLElement>(".ball")!
+
+const seek0 = document.querySelector<HTMLButtonElement>(".seek-0")
+const seek05 = document.querySelector<HTMLButtonElement>(".seek-05")
+const seek1 = document.querySelector<HTMLButtonElement>(".seek-1")
+
+const inputProgress = document.querySelector<HTMLInputElement>(".progress")
+const inputSlider = document.querySelector<HTMLInputElement>(".slider")
+
+/**
+ * Events
+ */
+;["play", "reverse", "pause", "stop", "refresh", "resume"].forEach(
+  (name: any) =>
+    (document.querySelector<HTMLButtonElement>(`.${name}`)!.onclick = () => {
+      // @ts-ignore
+      itp[name]()
+    }),
+)
+
+seek0!.onclick = () => itp.seek(0, false)
+seek05!.onclick = () => itp.seek(0.5, false)
+seek1!.onclick = () => itp.seek(1, false)
+inputProgress!.onchange = () => itp.seek(parseFloat(inputProgress!.value) / 100, false)
+inputSlider!.oninput = () => itp.seek(parseFloat(inputSlider!.value) / 100, false)
+
+
+/**
+ * PSAP type
+ */
+type InterpolKeys = keyof InterpolConstruct<any>;
+type CustomPropsValues = Omit<PropsValues, InterpolKeys>;
+
+const psap = (
+  el: HTMLElement | HTMLElement[],
+  options: InterpolConstruct<any> & { [x:string]: CustomPropsValues }
+) => {
+
+  const OptionsWithoutProps = {
+    duration: options?.duration ?? 1000,
+    ease: options?.ease ?? "linear",
+    reverseEase: options?.reverseEase ?? "linear",
+    paused: options?.paused ?? false,
+    immediateRender: options?.immediateRender ?? false,
+    delay: options?.delay ?? 0,
+    debug: options?.debug ?? false,
+    beforeStart: options?.beforeStart ?? (()=> {}),
+    onUpdate: options?.onUpdate ?? (()=> {}),
+    onComplete: options?.onComplete ?? (()=> {}),
+  }
+
+  // in options, get all keys that are not in OptionsWithoutProps
+  const props = Object.keys(options).reduce((acc, key) => {
+    if (!Object.keys(OptionsWithoutProps).includes(key)) acc[key] = options[key]
+    return acc
+  }, {} as Record<string, PropsValues>)
+
+
+  return new Interpol({ el, props, ...OptionsWithoutProps })
+}
+
+/**
+ * Use a simple psap
+ */
+const itp = psap($element, {
+  x: [0, 100, "px"],
+  y: { from: 0, to: 100, unit:"px", ease: "power1.in"},
+  ease: "power3.out",
+  paused: true,
+  onComplete: ({x}, time, props, instance) => {
+
+  }
+})
+
+itp.play()
+
diff --git a/examples/interpol-psap/src/vite-env.d.ts b/examples/interpol-psap/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/interpol-psap/tsconfig.json b/examples/interpol-psap/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/interpol-psap/tsconfig.node.json b/examples/interpol-psap/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/interpol/src/core/types.ts b/packages/interpol/src/core/types.ts
@@ -49,7 +49,7 @@ export type CallBack<K extends keyof Props> = (
 export type El = HTMLElement | HTMLElement[] | Record<any, number> | null
 
 export interface InterpolConstruct<K extends keyof Props> {
-  props: Props<K>
+  props?: Props<K>
   duration?: Value
   ease?: Ease
   reverseEase?: Ease

diff --git a/packages/interpol/src/index.ts b/packages/interpol/src/index.ts
@@ -4,3 +4,4 @@ export { Timeline } from "./Timeline"
 export { Ticker } from "./core/Ticker"
 export { Power1, Power2, Power3, Power4, Expo, easeAdapter } from "./core/ease"
 export { styles } from "./core/styles"
+export type { El, InterpolConstruct, PropsValues } from "./core/types"