add timeline events start and end

package.json

@@ -24,6 +24,7 @@
 		"typescript": "^5.1.6"
 	},
 	"dependencies": {
-		"bezier-easing": "^2.1.0"
+		"bezier-easing": "^2.1.0",
+		"fire": "npm:[email protected]"
 	}
 }

src/timeline/public.js

@@ -1,7 +1,8 @@
 import { takeProp } from '../utils/internal.js';
 import Timeline from './timeline.js';
-import { STATE_AFTER } from '../timing/timing.js';
+import { STATE_BEFORE, STATE_AFTER } from '../timing/timing.js';
 import { callStagger } from '../stagger/stagger.js';
+import Events from '../utils/events.js';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
@@ -12,6 +13,9 @@ export default class PublicTimeline {
 		this._defaults = takeProp(props, 'defaults', {});
 		this._inner = new Timeline(props);
 
+		// 'start', 'end'
+		this._events = new Events;
+
 		this._state = STATE_PAUSED;
 		this._runningTicker = null;
 	}
@@ -94,15 +98,29 @@ export default class PublicTimeline {
 		this._inner.timing.reverse();
 	}
 
+	// start, update, end -> () => // remove Event
+	on(event, fn) {
+		return this._events.add(event, fn);
+	}
+
+	onPromise(event) {
+		return this._events.wait(event);
+	}
+
 	_startTicker() {
 		if (this._runningTicker)
 			return;
 
 		this._inner.init();
 
 		this._runningTicker = this._inner.ticker.add(change => {
+			if (this._inner.timing.state === STATE_BEFORE) {
+				this._events.trigger('start');
+			}
+
 			if (this._inner.timing.state === STATE_AFTER) {
 				this._stopTicker();
+				this._events.trigger('end');
 				return;
 			}
 

src/timeline/timeline.js

@@ -28,8 +28,6 @@ export default class Timeline {
 
 		// { type: label|animation, value: {}, offset, start: x, end: y, render }
 		this.entries = [];
-		// this.animationsStartOrder = [];
-		// this.animationsEndOrder = [];
 
 		this._initialized = false;
 		this._renderQueue = null;
@@ -153,7 +151,7 @@ export default class Timeline {
 			entry.value.init();
 		}
 
-		this.timing.seek(0);
+		this.timing.seek(-1);
 		this.timing.reversed = reversed;
 		startOrdered.forEach(e => {
 			e.value.seek(-1);

src/utils/events.js

@@ -0,0 +1,35 @@
+import Listeners from 'fire/util/listeners.js';
+
+export default class Events {
+	constructor() {
+		this.listeners = new Map;
+	}
+
+	add(event, fn) {
+		let list = this.listeners.get(event);
+		if (!list) {
+			list = new Listeners;
+			this.listeners.set(event, list);
+		}
+
+		return list.add(fn);
+	}
+
+	wait(event) {
+		return new Promise(resolve => {
+			let rm = () => {};
+			const call = a => {
+				rm();
+				resolve(a);
+			};
+			rm = this.add(event, call);
+		});
+	}
+
+	trigger(event, ...args) {
+		let list = this.listeners.get(event);
+		if (!list)
+			return;
+		list.trigger(...args);
+	}
+}