anim-engine 0.2.0 → 0.3.0

package/README.md

@@ -231,8 +231,8 @@ For more complex sequences, use `createTimeline`:
 import { createTimeline } from "anim-engine";
 
 const flash = createTimeline([
-  { at: 0, keyframe: { keyframes: [{ value: 0 }, { value: 1, gap: 300 }] } },
-  { gap: 0, keyframe: { keyframes: [{ value: 1 }, { value: 0, gap: 300 }] } },
+  { at: 0, animation: { keyframes: [{ value: 0 }, { value: 1, gap: 300 }] } },
+  { gap: 0, animation: { keyframes: [{ value: 1 }, { value: 0, gap: 300 }] } },
 ]);
 await flash.play();
 ```
@@ -248,14 +248,14 @@ const timeline = createTimeline(
   [
     {
       at: 0,
-      keyframe: {
+      animation: {
         keyframes: [{ value: 0 }, { value: 1, gap: 500 }],
         onUpdate: (v) => (sprite.alpha = v),
       },
     },
     {
       at: 0,
-      keyframe: {
+      animation: {
         keyframes: [{ value: -100 }, { value: 0, gap: 800, ease: "outBack" }],
         onUpdate: (v) => (sprite.x = v),
       },
@@ -273,8 +273,8 @@ timeline.play();
 
 ```ts
 type TimelineLayer =
-  | { keyframe: KeyframedAnimationOptions; at: DynamicValue }
-  | { keyframe: KeyframedAnimationOptions; gap: number };
+  | { animation: KeyframedAnimationOptions; at: DynamicValue }
+  | { animation: KeyframedAnimationOptions; gap: number };
 ```
 
 | Parameter            | Type                 | Description                                                    |
@@ -676,7 +676,7 @@ requestAnimationFrame(gameLoop);
 | `AnimationOptions`          | Single tween or keyframe animation options (discriminated union)                                                        |
 | `Keyframe`                  | `{ value, gap?, ease? }`                                                                                                |
 | `KeyframedAnimationOptions` | `{ keyframes: Keyframe[], onStarted?, onUpdate?, onProgress?, onEnded? }`                                               |
-| `TimelineLayer`             | `{ keyframe: KeyframedAnimationOptions; at: DynamicValue } \| { keyframe: KeyframedAnimationOptions; gap: number }`     |
+| `TimelineLayer`             | `{ animation: KeyframedAnimationOptions; at: DynamicValue } \| { animation: KeyframedAnimationOptions; gap: number }`     |
 | `SpringOptions`             | `to`, `stiffness`, `damping`, `mass`, `precision?`, `onUpdate`, `onEnded`                                               |
 | `SmoothDampOptions`         | `to`, `smoothTimeMs`, `maxSpeed?`, `precision?`, `onUpdate`, `onEnded`                                                  |
 | `LerpOptions`               | `to`, `smoothTimeMs`, `precision?`, `onUpdate`, `onEnded`                                                               |

package/dist/timeline/create-timeline.d.ts

@@ -1,10 +1,10 @@
 import { KeyframedAnimationOptions } from '../animation/create-animation';
 import { AnimationStatus, DynamicValue } from '../shared/types';
 export type TimelineLayer = {
-    keyframe: KeyframedAnimationOptions;
+    animation: KeyframedAnimationOptions;
     at: DynamicValue;
 } | {
-    keyframe: KeyframedAnimationOptions;
+    animation: KeyframedAnimationOptions;
     gap: number;
 };
 export type Timeline = {

package/dist/timeline/create-timeline.js

@@ -10,7 +10,7 @@ var buildFromConfigs = (rawLayers) => {
 	let previousEndAt = 0;
 	for (const layer of rawLayers) {
 		const startAt = "at" in layer ? resolveValue(layer.at) : previousEndAt + layer.gap;
-		const resolvedKeyframes = layer.keyframe.keyframes.map((kf, j) => ({
+		const resolvedKeyframes = layer.animation.keyframes.map((kf, j) => ({
 			value: resolveValue(kf.value),
 			gap: j === 0 ? 0 : resolveValue(kf.gap ?? 0),
 			easeFn: resolveEasing(kf.ease ?? "inOutSine")
@@ -19,10 +19,10 @@ var buildFromConfigs = (rawLayers) => {
 		for (let i = 1; i < resolvedKeyframes.length; i++) layerDuration += resolvedKeyframes[i].gap;
 		const runner = createKeyframeRunner({
 			keyframes: resolvedKeyframes,
-			onStarted: layer.keyframe.onStarted,
-			onUpdate: layer.keyframe.onUpdate,
-			onProgress: layer.keyframe.onProgress,
-			onEnded: layer.keyframe.onEnded
+			onStarted: layer.animation.onStarted,
+			onUpdate: layer.animation.onUpdate,
+			onProgress: layer.animation.onProgress,
+			onEnded: layer.animation.onEnded
 		});
 		activeLayers.push({
 			startAt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anim-engine",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "JavaScript library for animating numbers",
   "license": "MIT",