chnobli 0.1.10 → 0.1.11

package/src/animator/Animator.ts

@@ -0,0 +1,130 @@
+import Property, { newProperty } from '../property/Property.js';
+import { Target } from '../target/Target.js';
+import Ticker from '../timing/Ticker.js';
+import Timing, { STATE_AFTER } from '../timing/Timing.js';
+
+export type Settings = {
+	duration: number;
+	ease?: (t: number) => number;
+};
+
+/*
+
+const opacity = animator(obj, {
+	duration: 200,
+	ease: sinInOut
+});
+
+opacity.set({ opacity: 0 });
+
+opacity.to({ opacity: 1 });
+opacity.to({ opacity: 2 }, 1000);
+*/
+
+export default class Animator {
+	setts: Settings;
+	target: Target;
+	private props: Map<string, PropertyAnimator<any>>;
+
+	private ticker: Ticker;
+
+	constructor(target: any, ticker: Ticker, setts: Settings) {
+		this.setts = setts;
+		this.target = ticker.registerTarget(target);
+
+		this.ticker = ticker;
+
+		this.props = new Map();
+	}
+
+	private getProp(name: string): PropertyAnimator<any> {
+		const prop = this.props.get(name);
+		if (prop) return prop;
+
+		const newProp = new PropertyAnimator(name, this.setts, this.target);
+		this.props.set(name, newProp);
+		return newProp;
+	}
+
+	set(props: Record<string, any>) {
+		for (const prop in props) {
+			const propAni = this.getProp(prop);
+			console.log('got prop ani', propAni);
+			propAni.set(this.target, props[prop]);
+			console.log('got prop ani', propAni);
+		}
+	}
+
+	to(props: Record<string, any>, duration?: number) {
+		for (const prop in props) {
+			const propAni = this.getProp(prop);
+			propAni.to(this.target, props[prop], duration);
+		}
+	}
+
+	/// returns if the ticker should keep running
+	_tick(change: number): boolean {
+		let shouldStop = true;
+
+		for (const prop of this.props.values()) {
+			prop.advance(change);
+			prop.render(this.target);
+
+			if (prop.timing.state < STATE_AFTER) {
+				shouldStop = false;
+			}
+		}
+
+		return !shouldStop;
+	}
+}
+
+export class PropertyAnimator<V> {
+	prop: Property<V>;
+	timing: Timing;
+
+	private initialized: boolean;
+
+	constructor(prop: string, setts: Settings, target: Target) {
+		this.prop = newProperty(prop, target.type());
+
+		this.timing = new Timing(setts);
+		this.initialized = false;
+	}
+
+	set(target: Target, value: any) {
+		const val = this.prop.parseValue(value);
+
+		this.prop.init(target, val, val);
+
+		this.timing.seek(2);
+	}
+
+	to(target: Target, value: any, duration?: number) {
+		const val = this.prop.parseValue(value);
+
+		let current = null;
+		if (this.initialized) {
+			current = this.prop.interpolate(this.timing.position);
+		}
+
+		this.prop.init(target, current, val);
+		this.initialized = true;
+
+		this.timing.seek(0);
+		if (typeof duration === 'number') {
+			this.timing.setDuration(duration);
+		}
+	}
+
+	advance(change: number) {
+		this.timing.advance(change);
+	}
+
+	// call advance first
+	render(target: Target) {
+		const pos = this.timing.position;
+
+		this.prop.setValue(target, this.prop.interpolate(pos));
+	}
+}

package/src/animator/index.ts

@@ -0,0 +1,56 @@
+/*
+
+const obj = { opacity: 1 };
+// maybe we could even have stagger?
+const opacity = animator(obj, {
+	// initial value
+	// might also be able to be set with stagger?
+	// for example
+	opacity: 1,
+
+	duration: 200,
+	ease: sineInOut
+});
+
+// or maybe instead
+
+const animator = animator();
+animator.add(obj, {
+	opacity: 1,
+	duration: 200,
+	ease: sineInOut
+});
+
+// what is the reason why we would wan't one animator with
+// multiple objects with different timings
+// could we not just use multiple animators
+
+
+opacity.set(obj, { opacity: 0 });
+
+let's make the most basic animator first
+
+
+const opacity = animator(obj, {
+	duration: 200,
+	ease: sinInOut
+});
+
+opacity.set({ opacity: 0 });
+
+opacity.to({ opacity: 1 });
+opacity.to({ opacity: 2 }, 1000);
+
+
+
+
+*/
+
+import Animator, { AnimatorProps } from './public.js';
+
+export { Animator };
+export type { AnimatorProps };
+
+export function animator(target: any, props?: AnimatorProps): Animator {
+	return new Animator(target, props);
+}

package/src/animator/public.ts

@@ -0,0 +1,66 @@
+/*
+set,
+to,
+*/
+
+import AnimationFrameTicker from '../timing/AnimationFrameTicker.js';
+import Ticker from '../timing/Ticker.js';
+import Events from '../utils/Events.js';
+import Animator from './Animator.js';
+
+export type AnimatorProps = {
+	duration?: number;
+	ease?: (t: number) => number;
+};
+
+export default class PublicAnimator {
+	private ticker: Ticker;
+	private inner: Animator;
+	private runningTicker: any;
+	private events: Events;
+
+	constructor(target: any, props: AnimatorProps = {}) {
+		this.ticker = AnimationFrameTicker.global();
+		this.inner = new Animator(target, this.ticker, {
+			duration: props.duration ?? 1000,
+			ease: props.ease,
+		});
+		this.events = new Events();
+	}
+
+	set(props: Record<string, any>): this {
+		this.inner.set(props);
+		this.startTicker();
+
+		return this;
+	}
+
+	to(props: Record<string, any>, duration?: number): this {
+		this.inner.to(props, duration);
+		this.startTicker();
+
+		return this;
+	}
+
+	// on: update
+	on(ev: string, fn: (...args: any[]) => void): () => void {
+		return this.events.add(ev, fn);
+	}
+
+	private startTicker() {
+		if (this.runningTicker) return;
+
+		this.runningTicker = this.ticker.add((change, opts) => {
+			const keepRunning = this.inner._tick(change);
+
+			opts.onApplied(() => {
+				this.events.trigger('update');
+			});
+
+			if (!keepRunning) {
+				opts.remove();
+				this.runningTicker = null;
+			}
+		});
+	}
+}

package/src/chnobli.ts

@@ -1,11 +1,12 @@
 import Animation, { AnimationProps } from './animation/public.js';
-import Timeline from './timeline/public.js';
+import Timeline, { TimelineProps } from './timeline/public.js';
 import Stagger, { type StaggerValue } from './stagger/stagger.js';
 import type { Targets, AnimationTarget } from './target/Target.js';
 
 export type {
 	Animation,
 	Timeline,
+	TimelineProps,
 	Stagger,
 	Targets,
 	AnimationTarget,
@@ -28,7 +29,7 @@ export function animate(
 	return new Animation(targets, props);
 }
 
-export function timeline(props: Record<string, any> = {}): Timeline {
+export function timeline(props: TimelineProps = {}): Timeline {
 	return new Timeline(props);
 }
 

package/src/property/ClassProperty.ts

@@ -77,7 +77,7 @@ export default class ClassProperty implements Property<string[], Interpolated> {
 		 * and in reverse add it at pos 1
 		 */
 
-		let obj: Interpolated = {
+		const obj: Interpolated = {
 			add: [],
 			remove: [],
 		};

package/src/property/TransformXYProperty.ts

@@ -1,5 +1,5 @@
 import Value from '../values/Value.js';
-import Property, { ParseableValue } from './Property.js';
+import Property from './Property.js';
 import { Target } from '../target/Target.js';
 
 export type XYValue = {

package/src/scroll/Scroll.ts

@@ -1,7 +1,18 @@
-import PublicTimeline, { Offset } from '../timeline/public.js';
+import ResponsiveEvent from '../responsive/ResponsiveEvent.js';
+import PublicTimeline from '../timeline/public.js';
+import Events from '../utils/Events.js';
 import { pageOffset } from '../utils/utils.js';
 import ScrollEvent from './ScrollEvent.js';
 
+export type DestroyOptions = {
+	/// defaults to true
+	timelines?: boolean;
+};
+
+const DEF_DESTROY_OPTS: DestroyOptions = {
+	timelines: true,
+};
+
 /*
 run timelines based on the scroll position
 
@@ -54,11 +65,13 @@ export type ScrollTrigger =
 
 export type OffsetValue = 'top' | 'center' | 'bottom' | number;
 
+export type State = 'before' | 'in' | 'after';
+
 export type ParsedScrollTrigger = {
 	target: HTMLElement;
 	offset: number;
 	view: number;
-	position: Position;
+	position: Position | undefined;
 };
 
 export type ScrollOffset = {
@@ -72,35 +85,45 @@ export type ScrollOffset = {
 
 export type Position = number | string;
 
+type LastSeek = {
+	pos: number;
+	state: State;
+};
+
 export default class ScrollTimeline {
 	private _initialized: boolean;
-	private _globalEvent: ScrollEvent;
-	private _rmEvent: () => void;
+	private _globalEvent: ScrollEvent | null;
+	private _scrollEvent: () => void;
+	private _responsiveEvent: any;
 
 	private _triggers: ParsedScrollTrigger[];
+	private _events: Events;
+	private lastEvPos: number;
 	private timelines: PublicTimeline[];
+	private state: State;
+	private lastSeek: LastSeek | undefined;
 	offsets: ScrollOffset[];
 
+	private debugMarkers: HTMLElement[];
+	private debugPrefix?: string;
+
 	constructor() {
 		this._initialized = false;
 		this._globalEvent = ScrollEvent.global();
-		this._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
+		this._scrollEvent =
+			this._globalEvent?.add(y => this._onScroll(y)).remove ?? (() => {});
+		this._responsiveEvent = ResponsiveEvent.global()?.add((a, b) => {
+			this._onResponsive(a, b);
+		});
 
 		this._triggers = [];
+		this._events = new Events();
+		this.lastEvPos = NaN;
 		this.timelines = [];
+		this.state = 'in';
 		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.debugMarkers = [];
 	}
 
 	/**
@@ -120,21 +143,38 @@ export default class ScrollTimeline {
 		this.timelines.push(timeline);
 	}
 
-	init() {
+	on(event: string, fn: (...args: any[]) => void): () => void {
+		return this._events.add(event, fn);
+	}
+
+	/// Returns true if the init function was executed
+	init(): boolean {
+		if (this._initialized) return false;
+
+		this._initialized = true;
+
 		// 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);
+		if (this._triggers.length < 1)
+			throw new Error('scroll timeline needs at least one trigger');
 
-			const y = offset.top + offset.height * t.offset;
+		if (this._triggers.length === 1) {
+			this._triggers.push({
+				target: this._triggers[0].target,
+				offset: 1,
+				view: 1,
+				position: 1,
+			});
+		}
 
-			if (y < previousY) throw new Error('offsets are not in order');
+		const positionStep = 1 / (this._triggers.length - 1);
 
+		// first calculate position and view
+		let prevPos = 0;
+		this.offsets = this._triggers.map((t, i) => {
 			let position;
 			if (typeof t.position === 'string') {
 				if (this.timelines.length !== 1)
@@ -143,59 +183,170 @@ export default class ScrollTimeline {
 					);
 
 				position = this.timelines[0].labelPosition(t.position);
-			} else if (t.position >= 0 || t.position <= 1) {
+			} else if (typeof t.position === 'number') {
 				position = t.position;
 			} else {
-				throw new Error('position should be between 0 and 1');
+				position = i * positionStep;
 			}
 
+			if (position < prevPos)
+				throw new Error('positions are not in order');
+			prevPos = position;
+
 			return {
-				y,
+				y: 0,
 				view: t.view,
 				position,
 			};
 		});
 
-		if (this.offsets.length < 1)
-			throw new Error('scroll timeline needs at least one trigger');
+		this.initY();
 
-		if (this.offsets.length === 1) {
-			this.offsets.push({
-				y:
-					this.offsets[0].y +
-					pageOffset(this._triggers[0].target).height,
-				view: 1,
-				position: 1,
-			});
+		return true;
+	}
+
+	private initY() {
+		let previousY = -1;
+		this.offsets.forEach((offset, i) => {
+			const t = this._triggers[i];
+
+			const pOffset = pageOffset(t.target);
+			const y = pOffset.top + pOffset.height * t.offset;
+
+			if (y < previousY) throw new Error('offsets are not in order');
+			previousY = y;
+
+			offset.y = y;
+		});
+	}
+
+	update() {
+		// execute initY to check if elements have moved
+		if (!this.init()) this.initY();
+
+		// todo this position should come from the GlobalEvent
+		this._onScroll({
+			y: window.scrollY,
+			height: window.innerHeight,
+		});
+	}
+
+	destroy(opts: DestroyOptions = {}) {
+		opts = { ...DEF_DESTROY_OPTS, ...opts };
+
+		this._scrollEvent();
+		this._events.destroy();
+		this._responsiveEvent?.remove();
+
+		if (opts.timelines) {
+			for (const timeline of this.timelines) {
+				timeline.destroy();
+			}
+		}
+
+		for (const marker of this.debugMarkers) {
+			marker.remove();
 		}
+		this.debugMarkers = [];
+	}
+
+	debug(prefix?: string) {
+		this.init();
+
+		this.debugPrefix = prefix;
+
+		const height = window.innerHeight;
+
+		this.offsets.forEach((offset, i) => {
+			const y = offset.y - height * offset.view;
+
+			const marker = document.createElement('span');
+			marker.textContent =
+				(prefix ? prefix + ' ' : '') + i + ': ' + offset.position;
+			marker.style.position = 'absolute';
+			marker.style.display = 'block';
+			marker.style.right = '0';
+			marker.style.top = y + 'px';
+			marker.style.minWidth = '50px';
+			marker.style.height = '2px';
+			marker.style.paddingRight = '10px';
+			marker.style.backgroundColor = 'red';
+			marker.style.zIndex = '100000';
+
+			document.body.appendChild(marker);
+			this.debugMarkers.push(marker);
+		});
 	}
 
 	private _onScroll({ y, height }: { y: number; height: number }) {
-		if (!this._initialized) {
-			this.init();
-			this._initialized = true;
+		this.init();
+
+		const pos = this.calcPosition({ y, height });
+		const clampPos = Math.min(1, Math.max(0, pos));
+		const state = pos < 0 ? 'before' : pos > 1 ? 'after' : 'in';
+
+		// we need to trigger once
+		// if the pos is not the same and but pos can have 3 states
+		// under (<0), in (0-1) or over (>1)
+		// each state should be triggered once
+		if (this.lastSeek?.pos === clampPos && this.lastSeek?.state === state) {
+			return;
 		}
 
+		this.lastSeek = { pos: clampPos, state };
+
+		this._events.trigger('update', clampPos, state);
+
+		for (const timeline of this.timelines) {
+			timeline.seek(pos);
+		}
+	}
+
+	/**
+	 * @ignore
+	 */
+	private _onResponsive(
+		_a: { width: number; height: number },
+		_b: { remove: () => void },
+	) {
+		this.update();
+
+		// reposition debug Markers
+		if (this.debugMarkers.length) {
+			for (const marker of this.debugMarkers) {
+				marker.remove();
+			}
+
+			this.debug(this.debugPrefix);
+		}
+	}
+
+	private calcPosition({ y, height }: { y: number; height: number }): number {
+		// check if it's outside of the bounds
+		const first = this.offsets[0];
+		if (y < first.y - height * first.view) return -1;
+
+		const last = this.offsets[this.offsets.length - 1];
+		if (y > last.y - height * last.view) return 2;
+
 		// 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 startY = start.y + height * start.view;
-			const endY = end.y + height * end.view;
-
-			const dif = endY - startY;
-			const x = 1 - (endY - y) / dif;
+			const startY = start.y - height * start.view;
+			const endY = end.y - height * end.view;
 
-			for (const timeline of this.timelines) {
-				// calc pos range
-				const pos =
-					start.position + (end.position - start.position) * x;
+			if (y >= startY && y < endY) {
+				const dif = endY - startY;
+				const x = 1 - (endY - y) / dif;
 
-				timeline.seek(pos);
+				return start.position + (end.position - start.position) * x;
 			}
 		}
+
+		return -1;
 	}
 }
 
@@ -239,7 +390,7 @@ function parseTrigger(
 		target: element,
 		offset: parseOffset(offset),
 		view: parseOffset(view),
-		position: position ?? (i == 0 ? 0 : 1),
+		position,
 	};
 }
 
@@ -261,7 +412,7 @@ function parseOffset(val: OffsetValue): number {
 		throw new Error('unknown view value ' + val);
 	}
 
-	if (typeof val !== 'number' || val < 0 || val > 1) {
+	if (typeof val !== 'number') {
 		throw new Error(
 			'view expecting to be a top/center/bottom or a percent value',
 		);

package/src/scroll/ScrollEvent.ts

@@ -10,6 +10,7 @@ export default class ScrollEvent {
 		this._listeners = new Set();
 
 		window.addEventListener('scroll', e => this._onScroll(e));
+		window.addEventListener('resize', e => this._onScroll(e));
 	}
 
 	static global() {

package/src/scroll/index.ts

@@ -1,5 +1,8 @@
+import type { Position, ScrollTrigger } from './Scroll.js';
 import Scroll from './public.js';
 
+export { Scroll, ScrollTrigger, Position };
+
 /**
  * Create a scroll animation
  */