@xtia/timeline 1.1.1 → 1.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 ### Not Just Another Animation Library
 
-Timeline is a type-safe, deterministic choreography system that can control state transitions in any environment, whether that's a simple or complex CSS animation, managing a microcontroller's output, or synchronising complex hardware sequences.
+Timeline is a type-safe, seekable, deterministic choreography system that can control state transitions in any environment, whether that's a simple or complex CSS animation, managing a microcontroller's output, or synchronising complex hardware sequences.
 
 * [API Reference](#reference)
 * [Playground](https://stackblitz.com/edit/timeline-string-tween?file=src%2Fmain.ts)
@@ -17,7 +17,7 @@ import { Timeline } from "@xtia/timeline";
 // create a Timeline
 const timeline = new Timeline();
 
-// over the first second, fade the body's background colour
+// over the first second, fade an element's background colour
 timeline
     .range(0, 1000)
     .tween("#646", "#000")
@@ -510,8 +510,8 @@ Registers an emission handler that calls one function for forward seeks to or pa
 ```ts
 point
     .applyDirectional(
-        element.classList.add("faded"),
-        element.classList.remove("faded"),
+        () => element.classList.add("faded"),
+        () => element.classList.remove("faded"),
     );
 ```
 

package/internal/point.d.ts

@@ -66,8 +66,8 @@ export declare class TimelinePoint extends Emitter<PointEvent> {
      * ```
      * point
      * 	.applyDirectional(
-     *     element.classList.add("faded"),
-     *     element.classList.remove("faded"),
+     *     () => element.classList.add("faded"),
+     *     () => element.classList.remove("faded"),
      *   );
      * ```
      *

package/internal/point.js

@@ -87,8 +87,8 @@ export class TimelinePoint extends Emitter {
      * ```
      * point
      * 	.applyDirectional(
-     *     element.classList.add("faded"),
-     *     element.classList.remove("faded"),
+     *     () => element.classList.add("faded"),
+     *     () => element.classList.remove("faded"),
      *   );
      * ```
      *

package/internal/timeline.d.ts

@@ -151,6 +151,7 @@ export interface ChainingInterface {
     thenTween<T extends Tweenable>(duration: number, apply: (v: Widen<T>) => void, from: T, to: T, easer: Easer): ChainingInterface;
     then(action: () => void): ChainingInterface;
     thenWait(duration: number): ChainingInterface;
+    fork(fn: (chain: ChainingInterface) => void): ChainingInterface;
     readonly end: TimelinePoint;
 }
 export {};

package/internal/timeline.js

@@ -330,12 +330,12 @@ export class Timeline {
             reverse = action;
         if (action)
             point.apply(reverse
-                ? (event => event.direction < 0 ? reverse() : action)
+                ? (event => event.direction < 0 ? reverse() : action())
                 : action);
         return this.createChainingInterface(point.position);
     }
     createChainingInterface(position) {
-        return {
+        const chain = {
             thenTween: (duration, apply, from, to, easer) => {
                 return this.tween(position, duration, apply, from, to, easer);
             },
@@ -344,8 +344,13 @@ export class Timeline {
                 this.point(position + delay);
                 return this.createChainingInterface(position + delay);
             },
+            fork: fn => {
+                fn(chain);
+                return chain;
+            },
             end: this.point(position),
         };
+        return chain;
     }
     /**
      * @deprecated use `timeline.currentTime`

package/internal/tween.js

@@ -1,9 +1,11 @@
 import { clamp } from "./utils";
-const tokenTypes = {
-    none: 0,
-    number: 1,
-    colour: 2,
-};
+var TokenTypes;
+(function (TokenTypes) {
+    TokenTypes[TokenTypes["none"] = 0] = "none";
+    TokenTypes[TokenTypes["number"] = 1] = "number";
+    TokenTypes[TokenTypes["colour"] = 2] = "colour";
+})(TokenTypes || (TokenTypes = {}));
+;
 export function createTween(from, to) {
     if (from === to)
         return () => from;
@@ -39,9 +41,9 @@ function createStringTween(from, to) {
         const fromToken = chunk.token;
         const toToken = toChunks[i].token;
         const prefix = chunk.prefix;
-        if (chunk.type === tokenTypes.none)
+        if (chunk.type === TokenTypes.none)
             return () => prefix;
-        if (chunk.type === tokenTypes.colour) {
+        if (chunk.type === TokenTypes.colour) {
             const fromColour = parseColour(fromToken);
             const toColour = parseColour(toToken);
             return progress => prefix + blendColours(fromColour, toColour, progress);
@@ -142,13 +144,13 @@ function tokenise(s) {
     // trailing literal after the last token – stored as a final chunk
     const tail = s.slice(lastIdx);
     if (tail.length) {
-        chunks.push({ prefix: tail, token: "", type: tokenTypes.none });
+        chunks.push({ prefix: tail, token: "", type: TokenTypes.none });
     }
     return chunks;
 }
 ;
 function getTokenType(token) {
     if (token.startsWith("#"))
-        return tokenTypes.colour;
-    return tokenTypes.number;
+        return TokenTypes.colour;
+    return TokenTypes.number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtia/timeline",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "repository": {
     "url": "https://github.com/tiadrop/timeline",
     "type": "github"