chnobli 0.1.8 → 0.1.9

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "chnobli",
-	"version": "0.1.8",
+	"version": "0.1.9",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {
 		"docs": "jsdoc -c jsdoc.conf.json",
 		"check": "tsc",
 		"lint": "eslint ./src",
-		"test": "node --expose-gc ./node_modules/.bin/vitest run",
-		"test:watch": "node --expose-gc ./node_modules/.bin/vitest",
+		"test": "node --expose-gc ../node_modules/.bin/vitest run",
+		"test:watch": "node --expose-gc ../node_modules/.bin/vitest",
 		"build": "tsc -p tsconfig.build.json",
-		"watch": "tsc -w"
+		"watch": "tsc -w -p tsconfig.build.json"
 	},
 	"repository": {
 		"type": "git",
@@ -26,6 +26,10 @@
 			"import": "./dist/utils/utils.js",
 			"types": "./dist/utils/utils.d.ts"
 		},
+		"./scroll": {
+			"import": "./dist/scroll/index.js",
+			"types": "./dist/scroll/index.d.ts"
+		},
 		".": {
 			"import": "./dist/chnobli.js",
 			"types": "./dist/chnobli.d.ts"
@@ -41,6 +45,6 @@
 	},
 	"dependencies": {
 		"bezier-easing": "^2.1.0",
-		"fire": "npm:fire-lib-js@^0.3.0-alpha.11"
+		"fire": "npm:fire-lib-js@^0.3.0"
 	}
 }

package/src/animation/Animation.ts

@@ -116,6 +116,7 @@ class PropertyAnimation<V> {
 	private valueFn: ((pos: number) => ParseableValue) | null;
 
 	private iniResponsive: any;
+	// todo i don't think the types match here?
 	private iniFrom: V | null;
 	private iniTo: V | null;
 
@@ -166,8 +167,7 @@ class PropertyAnimation<V> {
 
 		// init via responsive fn
 		if (this.iniResponsive) {
-			// todo this access to target can't be
-			const value = this.iniResponsive((target as any).target);
+			const value = this.iniResponsive(target.inner());
 
 			if (typeof value === 'object') {
 				if ('from' in value) from = this.prop.parseValue(value.from);

package/src/animation/public.ts

@@ -1,6 +1,20 @@
 import { takeProp } from '../utils/internal.js';
 import Timeline from '../timeline/public.js';
-import { staggerMap } from '../stagger/stagger.js';
+import Stagger, { staggerMap } from '../stagger/stagger.js';
+import { Targets } from '../chnobli.js';
+
+export type AnimationProps = {
+	autoplay?: boolean;
+	delay?: number | string | Stagger<number | string>;
+
+	ease?: (t: number) => number;
+
+	onStart?: () => void;
+	onEnd?: () => void;
+
+	// other properties
+	[key: string]: any;
+};
 
 /**
  * The animation consist of a timeline with just one animation
@@ -12,16 +26,36 @@ import { staggerMap } from '../stagger/stagger.js';
 export default class PublicAnimation {
 	private _tl: Timeline;
 
-	constructor(targets: any, props: Record<string, any> = {}) {
+	constructor(targets: Targets, props: AnimationProps = {}) {
 		const autoplay = parseAutoplay(takeProp(props, 'autoplay', true));
-		const delay = takeProp(props, 'delay', 0);
+		const delay = takeProp<number>(props, 'delay', 0);
 
 		// we don't wan't the ease and duration on the timeline
-		const ease = takeProp(props, 'ease', null);
-		const duration = takeProp(props, 'duration', null);
+		const ease = takeProp<AnimationProps['ease']>(props, 'ease', undefined);
+		const duration = takeProp<number | undefined>(
+			props,
+			'duration',
+			undefined,
+		);
 
 		this._tl = new Timeline(props);
 
+		// events
+		const onStart = takeProp<AnimationProps['onStart']>(
+			props,
+			'onStart',
+			undefined,
+		);
+		if (onStart) this._tl.on('start', onStart);
+
+		// events
+		const onEnd = takeProp<AnimationProps['onEnd']>(
+			props,
+			'onEnd',
+			undefined,
+		);
+		if (onEnd) this._tl.on('end', onEnd);
+
 		props.ease = ease;
 		props.duration = duration;
 

package/src/chnobli.ts

@@ -1,9 +1,17 @@
-import Animation from './animation/public.js';
+import Animation, { AnimationProps } from './animation/public.js';
 import Timeline from './timeline/public.js';
-import Scroll from './scroll/public.js';
-import Stagger from './stagger/stagger.js';
+import Stagger, { type StaggerValue } from './stagger/stagger.js';
+import type { Targets, AnimationTarget } from './target/Target.js';
 
-export type { Animation, Timeline, Stagger, Scroll };
+export type {
+	Animation,
+	Timeline,
+	Stagger,
+	Targets,
+	AnimationTarget,
+	StaggerValue,
+	AnimationProps,
+};
 
 // todo maybe add, to, from and fromTo to the animate function
 
@@ -14,8 +22,8 @@ export type { Animation, Timeline, Stagger, Scroll };
  *
  */
 export function animate(
-	targets: any,
-	props: Record<string, any> = {},
+	targets: Targets,
+	props: AnimationProps = {},
 ): Animation {
 	return new Animation(targets, props);
 }
@@ -24,14 +32,10 @@ export function timeline(props: Record<string, any> = {}): Timeline {
 	return new Timeline(props);
 }
 
-export function stagger(value: any): Stagger {
+export function stagger<O>(value: StaggerValue<O>): Stagger<O> {
 	return new Stagger(value);
 }
 
-export function scroll(props: Record<string, any> = {}): Scroll {
-	return new Scroll(props);
-}
-
 /*
 
 animate(target, {

package/src/property/Property.ts

@@ -20,6 +20,8 @@ export default interface Property<V, I = V> {
 }
 
 export function newProperty(prop: string, targetType = ''): Property<any> {
+	if (targetType === 'object') return new StyleProperty(prop, false);
+
 	if (targetType !== 'dom')
 		throw new Error('only dom is supported as target');
 

package/src/property/StyleProperty.ts

@@ -41,13 +41,13 @@ export default class StyleProperty
 
 	private _defaultValue: StyleValue | null;
 
-	constructor(name: string) {
+	constructor(name: string, useDefaults: boolean = true) {
 		this.name = name;
 
 		this.from = null;
 		this.to = null;
 
-		const def = STYLE_PROPS[name];
+		const def = useDefaults ? STYLE_PROPS[name] : undefined;
 		if (Array.isArray(def)) {
 			this._defaultValue = new StyleValue([new Value(def[0], def[1])]);
 			this.unit = def[1];

package/src/scroll/Scroll.ts

@@ -1,9 +1,29 @@
-import PublicTimeline from '../timeline/public.js';
-import { takeProp } from '../utils/internal.js';
+import PublicTimeline, { Offset } from '../timeline/public.js';
 import { pageOffset } from '../utils/utils.js';
 import ScrollEvent from './ScrollEvent.js';
 
 /*
+run timelines based on the scroll position
+
+scroll allows to specify a start and end trigger
+which then makes sure the timeline is always in sync with
+the scroll position
+
+{
+	start: myDiv,
+	// when the top of myDiv is at the top of the viewport
+	end: {
+		target: myDiv,
+		offset: 'bottom',
+		view: 'bottom'
+	}
+	// when the bottom of myDiv is at the bottom of the viewport
+}
+
+
+
+
+
 run animation when in view (start stop resume when different events happen)
 
 
@@ -24,57 +44,76 @@ scroll pin (once in trigger zone, elements keeps it position relative to start o
 parallax
 */
 
-type StartEndOffset = {
+export type ScrollTrigger =
+	| {
+			target: HTMLElement;
+			offset?: OffsetValue;
+			view?: OffsetValue;
+	  }
+	| HTMLElement;
+
+export type OffsetValue = 'top' | 'center' | 'bottom' | number;
+
+export type ParsedScrollTrigger = {
 	target: HTMLElement;
 	offset: number;
-};
-
-export type Start = {
-	y: number;
 	view: number;
+	position: Position;
 };
 
-export type End = {
+export type ScrollOffset = {
+	// the offset in pixels
 	y: number;
+	// the offset in percentage (0-1)
 	view: number;
+	// position
+	position: number;
 };
 
-export default class Scroll {
-	private _start: StartEndOffset;
-	private _end: StartEndOffset | null;
-	private _globalEvent: ScrollEvent;
+export type Position = number | string;
 
-	start: Start;
-	end: End;
+export default class ScrollTimeline {
+	private _initialized: boolean;
+	private _globalEvent: ScrollEvent;
+	private _rmEvent: () => void;
 
+	private _triggers: ParsedScrollTrigger[];
 	private timelines: PublicTimeline[];
-	private _rmEvent: () => void;
-	private _initialized: boolean;
+	offsets: ScrollOffset[];
 
-	constructor(props = {}) {
-		// { target, offset }
-		this._start = parseStart(takeProp(props, 'start', null));
-		// { target, offset }
-		this._end = parseEnd(takeProp(props, 'end', null));
+	constructor() {
+		this._initialized = false;
 		this._globalEvent = ScrollEvent.global();
+		this._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
 
-		this.start = {
-			// px
-			y: 0,
-			// percentage
-			view: parseOffset(takeProp(props, 'startView', 'top')),
-		};
-		this.end = {
-			// px
-			y: 0,
-			// percentage
-			view: parseOffset(takeProp(props, 'endView', 'bottom')),
-		};
-
+		this._triggers = [];
 		this.timelines = [];
+		this.offsets = [];
+
+		// this.timeline = timeline;
+		// this._triggers = triggers.map(parseTrigger);
+		// this.offsets = this._triggers.map(t => {
+		// 	return {
+		// 		y: 0,
+		// 		view: t.view,
+		// 	};
+		// });
+
+		// if (this.offsets.length < 2)
+		// 	throw new Error('scroll timeline needs at least two triggers');
+	}
 
-		this._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
-		this._initialized = false;
+	/**
+	 * Add a trigger to the timeline
+	 *
+	 * Providing an offset at which point the trigger should end
+	 *
+	 * If it is the first trigger it is not allowed to be set?
+	 */
+	add(trigger: ScrollTrigger, position?: Position) {
+		this._triggers.push(
+			parseTrigger(trigger, position, this._triggers.length),
+		);
 	}
 
 	addTimeline(timeline: PublicTimeline) {
@@ -82,77 +121,113 @@ export default class Scroll {
 	}
 
 	init() {
-		const startOffset = pageOffset(this._start.target);
-		this.start.y =
-			startOffset.top + startOffset.height * this._start.offset;
-
-		if (this._end) {
-			const offset = pageOffset(this._end.target);
-			this.end.y = offset.top + offset.height * this._end.offset;
-		} else {
-			this.end.y = this.start.y + pageOffset(this._start.target).height;
+		// todo we need to calculate the position for each timeline
+		//
+		// calculate the positions and offsets
+		// if we are missing one extend them
+
+		let previousY = -1;
+
+		this.offsets = this._triggers.map(t => {
+			const offset = pageOffset(t.target);
+
+			const y = offset.top + offset.height * t.offset;
+
+			if (y < previousY) throw new Error('offsets are not in order');
+
+			let position;
+			if (typeof t.position === 'string') {
+				if (this.timelines.length !== 1)
+					throw new Error(
+						'labels can only be used with one timeline',
+					);
+
+				position = this.timelines[0].labelPosition(t.position);
+			} else if (t.position >= 0 || t.position <= 1) {
+				position = t.position;
+			} else {
+				throw new Error('position should be between 0 and 1');
+			}
+
+			return {
+				y,
+				view: t.view,
+				position,
+			};
+		});
+
+		if (this.offsets.length < 1)
+			throw new Error('scroll timeline needs at least one trigger');
+
+		if (this.offsets.length === 1) {
+			this.offsets.push({
+				y:
+					this.offsets[0].y +
+					pageOffset(this._triggers[0].target).height,
+				view: 1,
+				position: 1,
+			});
 		}
 	}
 
-	_onScroll({ y, height }: { y: number; height: number }) {
+	private _onScroll({ y, height }: { y: number; height: number }) {
 		if (!this._initialized) {
 			this.init();
 			this._initialized = true;
 		}
 
-		const start = this.start.y + height * this.start.view;
-		const end = this.end.y + height * this.end.view;
+		// find the matching offset
+		// rolling window
+		for (let i = 1; i < this.offsets.length; i++) {
+			const start = this.offsets[i - 1];
+			const end = this.offsets[i];
 
-		const dif = end - start;
-		const x = 1 - (end - y) / dif;
+			const startY = start.y + height * start.view;
+			const endY = end.y + height * end.view;
 
-		for (const timeline of this.timelines) {
-			timeline.seek(x);
-		}
-	}
-}
+			const dif = endY - startY;
+			const x = 1 - (endY - y) / dif;
 
-function parseStart(val: any): StartEndOffset {
-	// might be an object { target, offset }
-	if (!val) {
-		throw new Error(
-			'unknown start property use an html element or an object',
-		);
-	}
-
-	let element = null;
-	let offset = 'top';
+			for (const timeline of this.timelines) {
+				// calc pos range
+				const pos =
+					start.position + (end.position - start.position) * x;
 
-	if (typeof val === 'object') {
-		if (val instanceof HTMLElement) element = val;
-		else if ('target' in val) {
-			element = val.target;
-			if (typeof val.offset !== 'undefined') offset = val.offset;
-		} else {
-			throw new Error('start unknown ' + val);
+				timeline.seek(pos);
+			}
 		}
-	} else {
-		throw new Error('unknown start val');
 	}
-
-	return {
-		target: element,
-		offset: parseOffset(offset),
-	};
 }
 
-function parseEnd(val: any): StartEndOffset | null {
+/**
+ * Parse the start property
+ *
+ * can be an HTMLElement or an object { target, offset }
+ *
+ * the default offset is top
+ * the default view is top
+ */
+function parseTrigger(
+	val: ScrollTrigger,
+	position: Position | undefined,
+	i: number,
+): ParsedScrollTrigger {
 	// might be an object { target, offset }
-	if (!val) return null;
+	if (!val) {
+		throw new Error('unknown property use an html element or an object');
+	}
 
 	let element = null;
-	let offset = 'top';
+	let offset: OffsetValue = 'top';
+	let view: OffsetValue = i == 0 ? 'top' : 'bottom';
 
 	if (typeof val === 'object') {
-		if (val instanceof HTMLElement) element = val;
-		else if ('target' in val) {
+		if (val instanceof HTMLElement) {
+			element = val;
+		} else if ('target' in val) {
 			element = val.target;
 			if (typeof val.offset !== 'undefined') offset = val.offset;
+			if (typeof val.view !== 'undefined') view = val.view;
 		} else {
 			throw new Error('start unknown ' + val);
 		}
@@ -163,21 +238,30 @@ function parseEnd(val: any): StartEndOffset | null {
 	return {
 		target: element,
 		offset: parseOffset(offset),
+		view: parseOffset(view),
+		position: position ?? (i == 0 ? 0 : 1),
 	};
 }
 
-function parseOffset(val: any): number {
+/**
+ * Parse the offset value
+ *
+ * can be a string (top, center, bottom) or a number (0-1)
+ *
+ * 0 = top
+ * 0.5 = center
+ * 1 = bottom
+ */
+function parseOffset(val: OffsetValue): number {
 	if (typeof val === 'string') {
 		if (val === 'top') return 0;
-
 		if (val === 'center') return 0.5;
-
 		if (val === 'bottom') return 1;
 
 		throw new Error('unknown view value ' + val);
 	}
 
-	if (typeof val !== 'number') {
+	if (typeof val !== 'number' || val < 0 || val > 1) {
 		throw new Error(
 			'view expecting to be a top/center/bottom or a percent value',
 		);

package/src/scroll/index.ts

@@ -0,0 +1,8 @@
+import Scroll from './public.js';
+
+/**
+ * Create a scroll animation
+ */
+export function scroll(): Scroll {
+	return new Scroll();
+}

package/src/scroll/public.ts

@@ -1,20 +1,31 @@
-import PublicTimeline from '../timeline/public.js';
-import Scroll from './Scroll.js';
+import { Timeline } from '../chnobli.js';
+// import Scroll from './Scroll.js';
+import ScrollTimeline, { Position, ScrollTrigger } from './Scroll.js';
 
-export default class PublicScroll {
-	private _inner: Scroll;
+export default class Scroll {
+	private _inner: ScrollTimeline;
 
-	/*
-	{
-		start: el | px
-		startView: 'top'
+	constructor() {
+		this._inner = new ScrollTimeline();
 	}
-	*/
-	constructor(props: Record<string, any> = {}) {
-		this._inner = new Scroll(props);
+
+	/**
+	 * Add a trigger to the timeline
+	 *
+	 * Providing an offset at which point the trigger should end
+	 */
+	add(trigger: ScrollTrigger, position?: Position): this {
+		this._inner.add(trigger, position);
+
+		return this;
 	}
 
-	add(timeline: PublicTimeline) {
+	/**
+	 * Add a timeline to the scroll
+	 */
+	addTimeline(timeline: Timeline): this {
 		this._inner.addTimeline(timeline);
+
+		return this;
 	}
 }

package/src/stagger/stagger.ts

@@ -3,34 +3,48 @@
  * allowing to easely offset each target by a few pixels
  */
 
-function isStagger(value: any) {
+function isStagger<O>(value: any): value is Stagger<O> {
+	const v = value as any;
+
 	return (
-		typeof value === 'object' &&
-		value !== null &&
-		typeof value.__isStagger__ === 'function'
+		typeof v === 'object' &&
+		v !== null &&
+		typeof v.__isStagger__ === 'function'
 	);
 }
 
-export function callStagger(value: any, i: number, l: any = null) {
-	if (isStagger(value)) return value.call(i, l);
+export function callStagger<O>(
+	value: O | Stagger<O>,
+	i: number,
+	length?: number,
+): O {
+	if (isStagger(value)) return value.call(i, length);
 
 	return value;
 }
 
-export function staggerMap(value: any, fn: (v: any) => any) {
-	if (isStagger(value))
-		return new Stagger((...args: any[]) => fn(value.call(...args)));
+export function staggerMap<O, NO>(
+	value: O | Stagger<O>,
+	fn: (val: O) => NO,
+): NO | Stagger<NO> {
+	if (isStagger(value)) {
+		return new Stagger((i: number, length?: number) =>
+			fn(value.call(i, length)),
+		);
+	}
 
 	return fn(value);
 }
 
-export default class Stagger {
-	private fn: (...args: any[]) => any;
+export type StaggerValue<O> = (i: number, length?: number) => O;
+
+export default class Stagger<O> {
+	private fn: StaggerValue<O>;
 
 	/**
 	 * @ignore
 	 */
-	constructor(value: any) {
+	constructor(value: StaggerValue<O>) {
 		if (typeof value === 'function') {
 			this.fn = value;
 			return;
@@ -40,8 +54,8 @@ export default class Stagger {
 		throw new Error('unknown stagger value ' + value);
 	}
 
-	call(...args: any[]): any {
-		return this.fn(...args);
+	call(i: number, length?: number): O {
+		return this.fn(i, length);
 	}
 
 	/**