willybrauner · willybrauner · Oct 21, 2023 · Oct 16, 2023 · Oct 21, 2023 · Oct 21, 2023
diff --git a/.changeset/poor-emus-shave.md b/.changeset/poor-emus-shave.md
@@ -0,0 +1,35 @@
+---
+"@wbe/interpol": minor
+---
+
+el property accepts object
+
+`el` property can received an object element instead of an HTMLElement:
+
+```ts
+const program = { 
+  uniforms: { 
+    uProgress: { 
+      value: 0 
+    } 
+  } 
+}
+
+// classic interpolation
+new Interpol({
+  props: {
+    value: [0, 100],
+  },
+  onUpdate: ({ value }) =>  {
+    program.uniforms.uProgress.value = value
+  }
+})
+
+// shortest interpolation with `el` object property
+new Interpol({
+  el: program.uniforms.uProgress,
+  props: {
+    value: [0, 100],
+  }
+})
+```
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -6,6 +6,7 @@
     "/examples/interpol-ease",
     "/examples/interpol-graphic",
     "/examples/interpol-menu",
+    "/examples/interpol-object-el",
     "/examples/interpol-particles",
     "/examples/interpol-timeline",
     "/examples/interpol-offsets"

diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ The examples of this repo are available on codesandbox:
 - [Interpol ease](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-ease)
 - [Interpol graphic](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-graphic)
 - [Interpol menu](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-menu)
+- [Interpol object el](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-object-el)
 - [Interpol offsets](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-offsets)
 - [Interpol particles](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-particles)
 - [Interpol timeline](https://codesandbox.io/s/github/willybrauner/interpol/tree/main/examples/interpol-timeline)

diff --git a/examples/interpol-object-el/.gitignore b/examples/interpol-object-el/.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-object-el/index.html b/examples/interpol-object-el/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>interpol object el</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/index.ts"></script>
+  </body>
+</html>
diff --git a/examples/interpol-object-el/package.json b/examples/interpol-object-el/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "interpol-object-el",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "vite --host"
+  },
+  "dependencies": {
+    "@wbe/interpol": "^0.8.1",
+    "ogl": "^1.0.1",
+    "prettier": "^3.0.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/examples/interpol-object-el/src/index.css b/examples/interpol-object-el/src/index.css
@@ -0,0 +1,18 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
diff --git a/examples/interpol-object-el/src/index.ts b/examples/interpol-object-el/src/index.ts
@@ -0,0 +1,74 @@
+import "./index.css"
+import { Renderer, Program, Mesh, Transform, Geometry } from "ogl"
+import fragment from "./shaders/fragment.glsl?raw"
+import vertex from "./shaders/vertex.glsl?raw"
+import { Timeline } from "@wbe/interpol"
+
+async function main() {
+  const renderer = new Renderer({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  const gl = renderer.gl
+  document.body.appendChild(gl.canvas)
+
+  function resize() {
+    renderer.setSize(window.innerWidth, window.innerHeight)
+  }
+  window.addEventListener("resize", resize, false)
+  resize()
+
+  const scene = new Transform()
+
+  const program = new Program(gl, {
+    vertex,
+    fragment,
+    transparent: true,
+    uniforms: {
+      uMove: { value: 0 },
+    },
+  })
+
+  const geometry = new Geometry(gl, {
+    position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
+    uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },
+  })
+
+  const mesh = new Mesh(gl, { geometry, program })
+  mesh.setParent(scene)
+
+  requestAnimationFrame(update)
+  function update() {
+    requestAnimationFrame(update)
+    renderer.render({ scene })
+  }
+
+  /**
+   * Animate
+   */
+  const tl = new Timeline({ paused: true })
+
+  tl.add({
+    el: program.uniforms.uMove,
+    props: {
+      value: [0, 1],
+    },
+    ease: "expo.out",
+    duration: 1000,
+
+    // no need to use onUpdate callback
+    // onUpdate: ({ value }) => {
+    //   program.uniforms.uMove.value = value;
+    // },
+  })
+
+  const loop = async () => {
+    await tl.play()
+    await tl.reverse()
+    loop()
+  }
+  loop()
+}
+
+main()
diff --git a/examples/interpol-object-el/src/shaders/fragment.glsl b/examples/interpol-object-el/src/shaders/fragment.glsl
@@ -0,0 +1,8 @@
+precision highp float;
+varying vec2 vUv;
+uniform float uMove;
+
+void main() {
+    float strength = floor(vUv.y * 10. * uMove) / 10.;
+    gl_FragColor = vec4(vec3(strength), 1.);
+}
diff --git a/examples/interpol-object-el/src/shaders/vertex.glsl b/examples/interpol-object-el/src/shaders/vertex.glsl
@@ -0,0 +1,9 @@
+attribute vec2 uv;
+attribute vec2 position;
+
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0, 1);
+}
diff --git a/examples/interpol-object-el/src/vite-env.d.ts b/examples/interpol-object-el/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/interpol-object-el/tsconfig.json b/examples/interpol-object-el/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/interpol/src/Interpol.ts b/packages/interpol/src/Interpol.ts
@@ -5,6 +5,7 @@ import {
   Props,
   Value,
   PropsValueObjectRef,
+  El,
 } from "./core/types"
 import { Ticker } from "./core/Ticker"
 import { deferredPromise } from "./core/deferredPromise"
@@ -64,7 +65,7 @@ export class Interpol<K extends keyof Props = keyof Props> {
   #onComplete: CallBack<K>
   #timeout: ReturnType<typeof setTimeout>
   #onCompleteDeferred = deferredPromise()
-  #el: HTMLElement | HTMLElement[] | null
+  #el: El
 
   constructor({
     props = null,

diff --git a/packages/interpol/src/core/styles.ts b/packages/interpol/src/core/styles.ts
@@ -1,3 +1,5 @@
+import { El } from "./types"
+
 const TRANSFORM_CACHE = new Map<HTMLElement, Record<string, string>>()
 const COORDS = ["x", "y", "z"]
 
@@ -6,12 +8,9 @@ const COORDS = ["x", "y", "z"]
  * @param element
  * @param props
  */
-export const styles = (
-  element: HTMLElement | HTMLElement[] | null,
-  props: Record<string, string | number>
-): void => {
+export const styles = (element: El, props: Record<string, string | number>): void => {
   if (!element) return
-  if (!Array.isArray(element)) element = [element]
+  if (!Array.isArray(element)) element = [element as HTMLElement]
 
   for (const el of element) {
     const transforms = TRANSFORM_CACHE.get(el) || {}
@@ -29,7 +28,12 @@ export const styles = (
         transforms[key] = `${key}(${props[key]})`
       }
       // All other properties, applying directly
-      else el.style[key] = props[key] && `${props[key]}`
+      else {
+        // case this is a style property
+        if (el.style) el.style[key] = props[key] && `${props[key]}`
+        // case this is a simple object
+        else el[key] = props[key]
+      }
     }
 
     // Get the string of transform properties without COORDS (x, y and z values)

diff --git a/packages/interpol/src/core/types.ts b/packages/interpol/src/core/types.ts
@@ -39,6 +39,8 @@ export type CallBack<K extends keyof Props> = (
   progress: number
 ) => void
 
+export type El = HTMLElement | HTMLElement[] | Record<any, number> | null
+
 export interface InterpolConstruct<K extends keyof Props> {
   props: Record<K, [Value, Value, Units?]>
   duration?: number | (() => number)
@@ -52,7 +54,7 @@ export interface InterpolConstruct<K extends keyof Props> {
   onUpdate?: CallBack<K>
   onComplete?: CallBack<K>
   ticker?: Ticker
-  el?: HTMLElement | HTMLElement[] | null
+  el?: El
 }
 
 /**

diff --git a/packages/interpol/tests/Interpol.el.test.ts b/packages/interpol/tests/Interpol.el.test.ts
@@ -34,4 +34,49 @@ describe.concurrent("Interpol DOM el", () => {
       resolve()
     })
   })
+
+  it("should set prop key and value on Object element", async () => {
+    const testElObj1 = () =>
+      new Promise(async (resolve: any) => {
+        const program = { uniform: { uProgress: { value: -100 } } }
+        const callback = ({ value }) => {
+          expect(program.uniform.uProgress.value).toBe(value)
+        }
+        const itp = new Interpol({
+          el: program.uniform.uProgress,
+          duration: 100,
+          props: {
+            value: [program.uniform.uProgress.value, 100],
+          },
+          beforeStart: callback,
+          onUpdate: callback,
+          onComplete: callback,
+        })
+
+        await itp.play()
+        resolve()
+      })
+
+    const testElObj2 = () =>
+      new Promise(async (resolve: any) => {
+        const program = { v: 0 }
+        const callback = ({ v }) => {
+          expect(program.v).toBe(v)
+        }
+        const itp = new Interpol({
+          el: program,
+          duration: 300,
+          props: {
+            v: [program.v, 1000],
+          },
+          beforeStart: callback,
+          onUpdate: callback,
+          onComplete: callback,
+        })
+        await itp.play()
+        resolve()
+      })
+
+    return Promise.all([testElObj1(), testElObj2()])
+  })
 })