chnobli 0.1.7 → 0.1.9

package/src/tests/properties.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/TestTicker';
-import TestResponsiveEvent from '../responsive/TestEvent';
+import TestTicker from '../timing/TestTicker.js';
+import TestResponsiveEvent from '../responsive/TestEvent.js';
 import { animate, timeline } from '../chnobli.js';
-import { responsive, curve } from '../utils/utils';
-import { el } from '../target/TestDomNode';
+import { responsive, curve, fromTo } from '../utils/utils.js';
+import { el } from '../target/TestDomNode.js';
 import { timeout } from 'fire/utils';
 
 describe('properties', () => {
@@ -180,4 +180,54 @@ describe('properties', () => {
 			'translate3d(50.000px,20.000px,0.000px)',
 		);
 	});
+
+	it('object-target', () => {
+		const ticker = new TestTicker();
+
+		const obj: { x: number; width?: number } = {
+			x: 0,
+		};
+		const tl = timeline()
+			.add(obj, {
+				x: 100,
+				width: fromTo(0, 100),
+				duration: 10,
+			})
+			.play();
+
+		ticker.run(5);
+		expect(obj.x).toBe(50);
+		expect(obj.width).toBe(50);
+
+		ticker.run();
+		expect(obj.x).toBe(100);
+		expect(obj.width).toBe(100);
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(obj.x).toBe(undefined);
+		expect(obj.width).toBe(undefined);
+	});
+
+	it('reset values', () => {
+		const ticker = new TestTicker();
+
+		const div = el();
+		div.computedStyle.width = '0px';
+		const tl = timeline()
+			.add(div, {
+				width: 100,
+				duration: 10,
+			})
+			.play();
+
+		ticker.run();
+		expect(div.style.width).toBe('100.000px');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(div.style.width).toBe(undefined);
+	});
 });

package/src/tests/timeline.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/TestTicker';
-import { animate, timeline } from '../chnobli';
-import { el } from '../target/TestDomNode';
+import TestTicker from '../timing/TestTicker.js';
+import { animate, timeline } from '../chnobli.js';
+import { el } from '../target/TestDomNode.js';
 
 describe('timeline', () => {
 	it('empty timeline', () => {

package/src/tests/timing.test.ts

@@ -5,7 +5,7 @@ import Timing, {
 	STATE_RUNNING,
 	STATE_ENDED,
 	STATE_AFTER,
-} from '../timing/Timing';
+} from '../timing/Timing.js';
 
 describe('timing', () => {
 	it('zero duration', () => {

package/src/tests/usecases.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/TestTicker';
-import TestResponsiveEvent from '../responsive/TestEvent';
-import { animate, timeline } from '../chnobli';
-import { responsive } from '../utils/utils';
-import { el } from '../target/TestDomNode';
+import TestTicker from '../timing/TestTicker.js';
+import TestResponsiveEvent from '../responsive/TestEvent.js';
+import { animate, timeline } from '../chnobli.js';
+import { responsive } from '../utils/utils.js';
+import { el } from '../target/TestDomNode.js';
 
 describe('usecases', () => {
 	it('accordion', () => {

package/src/tests/values.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/TestTicker';
-import { animate, timeline } from '../chnobli';
-import { responsive, from, fromTo } from '../utils/utils';
-import { el, getRootElement } from '../target/TestDomNode';
+import TestTicker from '../timing/TestTicker.js';
+import { animate, timeline } from '../chnobli.js';
+import { responsive, from, fromTo } from '../utils/utils.js';
+import { el, getRootElement } from '../target/TestDomNode.js';
 
 describe('values', () => {
 	it('rem unit', () => {

package/src/timeline/Nested.ts

@@ -1,6 +1,6 @@
-import { takeProp } from '../utils/internal';
-import Timeline from './TimeLine';
-import { timelineAdd } from './public';
+import { takeProp } from '../utils/internal.js';
+import Timeline from './Timeline.js';
+import { timelineAdd } from './public.js';
 
 export default class NestedTimeline {
 	_defaults: Record<string, any>;
@@ -19,7 +19,7 @@ export default class NestedTimeline {
 	 * Set's properties
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	set(targets: any, props: Record<string, any>, offset: any = null) {
+	set(targets: any, props: Record<string, any>, offset: any = null): this {
 		// for the moment let's just add as usual but set the duration to 0
 		return this.add(targets, { ...props, duration: 0 }, offset);
 	}
@@ -29,7 +29,7 @@ export default class NestedTimeline {
 	 *
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	add(targets: any, props: Record<string, any>, offset: any = null) {
+	add(targets: any, props: Record<string, any>, offset: any = null): this {
 		timelineAdd(this, targets, props, offset);
 
 		return this;
@@ -40,7 +40,7 @@ export default class NestedTimeline {
 	 *
 	 * This label can then be used in offsets
 	 */
-	label(label: string, offset: any = null) {
+	label(label: string, offset: any = null): this {
 		this._inner.label(label, offset);
 
 		return this;
@@ -55,7 +55,7 @@ export default class NestedTimeline {
 		fn: (tl: NestedTimeline) => void,
 		opts: Record<string, any> = {},
 		offset: any = null,
-	) {
+	): this {
 		const tl = new NestedTimeline(opts);
 
 		fn(tl);

package/src/timeline/{TimeLine.ts → Timeline.ts}

@@ -1,4 +1,4 @@
-import { takeProp } from '../utils/internal';
+import { takeProp } from '../utils/internal.js';
 import Timing, {
 	parseEase,
 	parseRepeat,
@@ -6,10 +6,10 @@ import Timing, {
 	parseReversed,
 	STATE_BEFORE,
 	STATE_ENDED,
-} from '../timing/Timing';
-import Ticker from '../timing/Ticker';
-import Animation from '../animation/Animation';
-import AnimationFrameTicker from '../timing/AnimationFrameTicker';
+} from '../timing/Timing.js';
+import Ticker from '../timing/Ticker.js';
+import Animation from '../animation/Animation.js';
+import AnimationFrameTicker from '../timing/AnimationFrameTicker.js';
 
 type Entry = {
 	type: 'label' | 'animation' | 'timeline';
@@ -24,7 +24,7 @@ type Entry = {
  * Timeline is the most versatile class
  *
  * A timeline can contain multiple animation, ordered one after the other or
- * offset.
+ * by an offset.
  */
 export default class Timeline {
 	timing: Timing;
@@ -49,6 +49,8 @@ export default class Timeline {
 	*/
 	constructor(props: Record<string, any> = {}) {
 		const nProps = {
+			// duration here is not important since it will be calculated
+			// based on the animations that get added
 			duration: 1000,
 			ease: parseEase(takeProp(props, 'ease', null)),
 			repeat: parseRepeat(takeProp(props, 'repeat', false)),
@@ -71,7 +73,7 @@ export default class Timeline {
 		};
 	}
 
-	isFinite() {
+	isFinite(): boolean {
 		return !this.entries.some(e => {
 			return e.type === 'animation' && !e.value.isFinite();
 		});
@@ -84,7 +86,7 @@ export default class Timeline {
 		props: Record<string, any>,
 		offset: any = null,
 		relative = 0,
-	) {
+	): this {
 		const animation = new Animation(target, this.ticker, props);
 
 		if (!animation.isFinite())
@@ -111,7 +113,7 @@ export default class Timeline {
 		});
 	}
 
-	label(label: string, offset: any = null) {
+	label(label: string, offset: any = null): this {
 		this.entries.push({
 			type: 'label',
 			value: label,
@@ -145,6 +147,21 @@ export default class Timeline {
 		this._updateTimings();
 	}
 
+	/**
+	 * Returns the position of a label
+	 *
+	 * needs to be initialized
+	 */
+	labelPosition(label: string): number {
+		const entry = this.entries.find(e => {
+			return e.type === 'label' && e.value === label;
+		});
+
+		if (!entry) throw new Error('could not find label ' + label);
+
+		return entry.start! / this.timing.duration;
+	}
+
 	init() {
 		if (this._initialized) return;
 		this._initialized = true;
@@ -254,6 +271,9 @@ export default class Timeline {
 		}
 	}
 
+	/**
+	 * Updates the timings of all animations
+	 */
 	_updateTimings() {
 		this._renderQueue = {
 			upcoming: [],

package/src/timeline/public.ts

@@ -1,34 +1,73 @@
-import { takeProp } from '../utils/internal';
-import Timeline from './TimeLine';
-import { STATE_ENDED } from '../timing/Timing';
-import { callStagger } from '../stagger/stagger';
-import Events from '../utils/Events';
-import ResponsiveEvent from '../responsive/ResponsiveEvent';
-import NestedTimeline from './Nested';
+import { takeProp } from '../utils/internal.js';
+import Timeline from './Timeline.js';
+import Timing, {
+	STATE_BEFORE,
+	STATE_ENDED,
+	TimingProps,
+} from '../timing/Timing.js';
+import Stagger, { callStagger } from '../stagger/stagger.js';
+import Events from '../utils/Events.js';
+import ResponsiveEvent from '../responsive/ResponsiveEvent.js';
+import NestedTimeline from './Nested.js';
+import { Targets } from '../chnobli.js';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
-const STATE_PLAYING = 2;
+const STATE_SEEK = 2;
+const STATE_PLAYING = 3;
 
 export type Responsive = {
 	responsive: () => void;
 };
 
+export type TimelineProps = {
+	// default properties for all animations
+	defaults?: Record<string, any>;
+
+	// make the timeline responsive default is true
+	// this means the timeline will update on resize
+	responsive?: boolean;
+
+	// ease
+	ease?: (t: number) => number;
+
+	// smoothSeek
+	smoothSeek?: SmoothSeekValue;
+
+	// repeat
+	// alternate
+	// reversed
+
+	// other properties
+	[key: string]: any;
+};
+
+export type Offset = number | string | Stagger<number | string>;
+
 export default class PublicTimeline {
+	/**
+	 * @ignore
+	 */
 	_defaults: Record<string, any>;
 	private _responsive: boolean;
 
+	/**
+	 * @ignore
+	 */
 	_inner: Timeline;
 
 	private _events: Events;
+	private _triggeredStart: boolean;
 
 	private _state: number;
 	private _renderedOnce: boolean;
 	private _runningTicker: any;
 	private _responsiveBlocks: { responsive: () => void }[];
 	private _responsiveEvent: any;
+	private _smoothSeek: SmoothSeek | null;
+	private _seekTo: number;
 
-	constructor(props: Record<string, any> = {}) {
+	constructor(props: TimelineProps = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
 		this._responsive = takeProp(props, 'responsive', true);
 
@@ -37,10 +76,16 @@ export default class PublicTimeline {
 		if ('duration' in props)
 			throw new Error('a timeline does not accept a duration');
 
+		this._smoothSeek = parseSmoothSeek(
+			takeProp<SmoothSeekValue>(props, 'smoothSeek', undefined),
+		);
+		this._seekTo = 0;
+
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
 		this._events = new Events();
+		this._triggeredStart = false;
 
 		this._state = STATE_PAUSED;
 		this._renderedOnce = false;
@@ -64,9 +109,10 @@ export default class PublicTimeline {
 
 	/**
 	 * Set's properties
+	 *
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	set(targets: any, props: Record<string, any>, offset = null) {
+	set(targets: Targets, props: Record<string, any>, offset?: Offset): this {
 		// for the moment let's just add as usual but set the duration to 0
 		return this.add(targets, { ...props, duration: 0 }, offset);
 	}
@@ -76,18 +122,18 @@ export default class PublicTimeline {
 	 *
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	add(targets: any, props: Record<string, any>, offset = null) {
+	add(targets: Targets, props: Record<string, any>, offset?: Offset): this {
 		timelineAdd(this, targets, props, offset);
 
 		return this;
 	}
 
 	/**
-	 * Adds a label at to the current nOffse
+	 * Adds a label at to the current nOffset
 	 *
 	 * This label can then be used in offsets
 	 */
-	label(label: string, offset: any = null) {
+	label(label: string, offset: any = null): this {
 		this._inner.label(label, offset);
 
 		return this;
@@ -99,7 +145,11 @@ export default class PublicTimeline {
 	 * fn: (timeline)
 	 */
 	// todo probably tl should be an interface
-	nest(fn: (tl: NestedTimeline) => void, opts = {}, offset: any = null) {
+	nest(
+		fn: (tl: NestedTimeline) => void,
+		opts = {},
+		offset: any = null,
+	): this {
 		const tl = new NestedTimeline(opts);
 
 		fn(tl);
@@ -113,7 +163,7 @@ export default class PublicTimeline {
 	 * Adds a responsive function call which get's called before the responsive
 	 * functions in properties
 	 */
-	addResponsive(responsive: Responsive | Responsive[]) {
+	addResponsive(responsive: Responsive | Responsive[]): this {
 		if (!this._responsiveEvent)
 			throw new Error('this timeline is not responsive');
 
@@ -133,7 +183,7 @@ export default class PublicTimeline {
 	/**
 	 * Starts to play the timeline if it hasn't started
 	 */
-	play() {
+	play(): this {
 		if (this._state === STATE_PLAYING) return this;
 
 		this._state = STATE_PLAYING;
@@ -160,13 +210,14 @@ export default class PublicTimeline {
 	seekMs(ms: number) {
 		this._inner.init();
 
-		this._inner.seekMs(ms);
-
-		if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
-
-		this._startTicker();
+		this.seek(this._inner.timing.normalizeMs(ms));
 	}
 
+	// todo maybe we should have two functions
+	// seek
+	// and setPosition
+	// seek would include reverse but setPosition would not
+
 	/**
 	 * Seeks to a normalized position in the timeline
 	 *
@@ -175,19 +226,37 @@ export default class PublicTimeline {
 	seek(pos: number) {
 		this._inner.init();
 
-		this._inner.seek(pos);
+		if (this._smoothSeek) {
+			this._smoothSeek.update(this._inner.timing.positionLinear(), pos);
+
+			if (this._state !== STATE_PLAYING) this._state = STATE_SEEK;
+		} else {
+			// this._inner.seek(pos);
+			this._seekTo = pos;
 
-		if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
+			if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
+		}
 
 		this._startTicker();
 	}
 
+	/**
+	 * Returns the position of a label
+	 */
+	labelPosition(label: string): number {
+		this._inner.init();
+
+		return this._inner.labelPosition(label);
+	}
+
 	// seek in Range (useful for scroll timelines)
 	// seek(startOffset, endOffset, pos)
 
 	/**
 	 * Resets the current timeline to the start
 	 * without changing anything
+	 *
+	 * this operation is not smooth use seek 0 if you wan't that
 	 */
 	reset() {
 		this._inner.seek(0);
@@ -217,7 +286,7 @@ export default class PublicTimeline {
 	/**
 	 * Returns wether the timeline is set to reversed
 	 */
-	isReversed() {
+	isReversed(): boolean {
 		return this._inner.timing.reversed;
 	}
 
@@ -234,6 +303,8 @@ export default class PublicTimeline {
 	 */
 	reverse() {
 		this._inner.timing.reverse();
+
+		// todo does this work with smooth seek?
 	}
 
 	/**
@@ -248,12 +319,12 @@ export default class PublicTimeline {
 	 * Does not get executed during seeking
 	 *
 	 */
-	on(event: string, fn: (...args: any[]) => void) {
+	on(event: string, fn: (...args: any[]) => void): () => void {
 		return this._events.add(event, fn);
 	}
 
 	// not working
-	onPromise(event: string) {
+	onPromise(event: string): Promise<any> {
 		return this._events.wait(event);
 	}
 
@@ -270,57 +341,67 @@ export default class PublicTimeline {
 		this._inner = null;
 	}
 
+	_maybeTriggerEndEvent() {
+		if (this._state !== STATE_PLAYING) return;
+
+		this._events.trigger('end');
+		this._triggeredStart = false;
+	}
+
+	/**
+	 * @ignore
+	 */
 	_startTicker() {
 		if (this._runningTicker) return;
 
 		this._inner.init();
 
+		const timingEnded = () => this._inner.timing.state >= STATE_ENDED;
+		const smoothSeekEnded = () =>
+			!this._smoothSeek || this._smoothSeek.state >= STATE_ENDED;
+
 		this._runningTicker = this._inner.ticker.add(change => {
-			if (this._inner.timing.state >= STATE_ENDED) {
-				if (!this._renderedOnce) {
-					this._renderedOnce = true;
-					this._inner.render();
+			if (!this._triggeredStart) {
+				// todo check that we are at the start
+				if (this._inner.timing.state <= STATE_BEFORE) {
+					this._events.trigger('start');
+					this._triggeredStart = true;
 				}
-
-				if (this._state === STATE_PLAYING) this._events.trigger('end');
-
-				this._state = STATE_PAUSED;
-				this._stopTicker();
-				return;
 			}
 
-			// if (this._inner.timing.state <= STATE_START) {
-			// 	this._events.trigger('start');
-			// }
-
-			// if (this._inner.timing.state >= STATE_ENDED) {
-			// 	this._stopTicker();
-			// 	this._events.trigger('end');
-			// 	return;
-			// }
-
-			if (this._state === STATE_PLAYING) this._inner.advance(change);
-
-			// todo when we add smooth seeks we need to update this
+			const allowSmoothSeek =
+				this._state === STATE_PLAYING || this._state === STATE_SEEK;
+			if (
+				allowSmoothSeek &&
+				this._smoothSeek &&
+				this._smoothSeek.state < STATE_ENDED
+			) {
+				this._smoothSeek.advance(change);
+				this._inner.seek(this._smoothSeek.value);
+			} else if (this._state === STATE_RENDER_ONCE) {
+				this._inner.seek(this._seekTo);
+			} else if (this._state === STATE_PLAYING) {
+				this._inner.advance(change);
+			}
 
 			this._inner.render();
 
-			if (this._inner.timing.state >= STATE_ENDED) {
-				if (this._state === STATE_PLAYING) this._events.trigger('end');
+			// we rendered once let's stop
+			const renderOnce = this._state === STATE_RENDER_ONCE;
 
-				this._state = STATE_PAUSED;
-				this._stopTicker();
-				return;
-			}
+			if (renderOnce || (timingEnded() && smoothSeekEnded())) {
+				this._maybeTriggerEndEvent();
 
-			// we rendered once let's stop
-			if (this._state === STATE_RENDER_ONCE) {
 				this._state = STATE_PAUSED;
 				this._stopTicker();
+				return;
 			}
 		});
 	}
 
+	/**
+	 * @ignore
+	 */
 	_stopTicker() {
 		if (!this._runningTicker) return;
 
@@ -328,6 +409,9 @@ export default class PublicTimeline {
 		this._runningTicker = null;
 	}
 
+	/**
+	 * @ignore
+	 */
 	_onResponsive(
 		a: { width: number; height: number },
 		b: { remove: () => void },
@@ -365,8 +449,64 @@ export function timelineAdd(
 			nProps[prop] = callStagger(nProps[prop], i, targets.length);
 		}
 
-		const nOffset = callStagger(offset, i);
+		const nOffset = callStagger(offset, i, targets.length);
 
 		tl._inner.add(target, nProps, nOffset, i);
 	}
 }
+
+export type SmoothSeekValue =
+	| number
+	| undefined
+	| { duration: number; ease?: (t: number) => number };
+
+/**
+ * Smooth seek
+ *
+ * can either just be a number (duration) or an object { duration, ease }
+ */
+function parseSmoothSeek(smoothSeek: SmoothSeekValue): SmoothSeek | null {
+	if (!smoothSeek) return null;
+
+	if (typeof smoothSeek === 'number') {
+		return new SmoothSeek({
+			duration: smoothSeek,
+		});
+	}
+
+	return new SmoothSeek({
+		duration: smoothSeek.duration,
+		ease: smoothSeek?.ease,
+	});
+}
+
+class SmoothSeek {
+	timing: Timing;
+	from: number;
+	to: number;
+
+	constructor(timing: TimingProps) {
+		this.timing = new Timing(timing);
+		this.timing.seek(1);
+		this.from = 0;
+		this.to = 0;
+	}
+
+	update(from: number, to: number) {
+		this.from = from;
+		this.to = to;
+		this.timing.seek(0);
+	}
+
+	advance(change: number) {
+		this.timing.advance(change);
+	}
+
+	get value(): number {
+		return this.from + (this.to - this.from) * this.timing.position;
+	}
+
+	get state(): number {
+		return this.timing.state;
+	}
+}

package/src/timing/AnimationFrameTicker.ts

@@ -1,5 +1,5 @@
-import { newTarget } from '../target/Target';
-import Ticker, { Callback } from './Ticker';
+import { newTarget } from '../target/Target.js';
+import Ticker, { Callback } from './Ticker.js';
 
 /**
  * The ticker is the main driver for all animations