chnobli 0.1.10 → 0.1.12

package/jsr.json

@@ -0,0 +1,16 @@
+{
+	"name": "@chuchi/chnobli",
+	"version": "0.1.12",
+	"license": "MIT",
+	"exports": {
+		".": "./src/chnobli.ts",
+		"./easing": "./src/timing/easing.ts",
+		"./utils": "./src/utils/utils.ts",
+		"./scroll": "./src/scroll/index.ts",
+		"./animator": "./src/animator/index.ts"
+	},
+	"publish": {
+		"include": ["src", "LICENSE.md"],
+		"exclude": ["src/tests"]
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chnobli",
-	"version": "0.1.10",
+	"version": "0.1.12",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {
@@ -9,12 +9,13 @@
 		"lint": "eslint ./src",
 		"test": "node --expose-gc ../node_modules/.bin/vitest run",
 		"test:watch": "node --expose-gc ../node_modules/.bin/vitest",
+		"check-jsr": "jsr publish --dry-run",
 		"build": "tsc -p tsconfig.build.json",
 		"watch": "tsc -w -p tsconfig.build.json"
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/soerenmeier/chnobli.git"
+		"url": "https://github.com/chuchi-dev/chnobli.git"
 	},
 	"license": "MIT",
 	"exports": {
@@ -30,17 +31,24 @@
 			"import": "./dist/scroll/index.js",
 			"types": "./dist/scroll/index.d.ts"
 		},
+		"./animator": {
+			"import": "./dist/animator/index.js",
+			"types": "./dist/animator/index.d.ts"
+		},
 		".": {
 			"import": "./dist/chnobli.js",
 			"types": "./dist/chnobli.d.ts"
 		}
 	},
 	"devDependencies": {
-		"eslint": "^8.45.0",
+		"@eslint/js": "^9.4.0",
+		"@types/eslint__js": "^8.42.3",
+		"eslint": "^8.57.0",
 		"jsdoc": "^4.0.2",
 		"prettier": "^3.2.4",
 		"tslib": "^2.6.2",
-		"typescript": "^5.1.6",
+		"typescript": "^5.4.5",
+		"typescript-eslint": "^7.11.0",
 		"vitest": "^1.1.3"
 	},
 	"dependencies": {

package/src/animation/Animation.ts

@@ -7,6 +7,7 @@ import Timing, {
 import Property, { ParseableValue, newProperty } from '../property/Property.js';
 import Ticker from '../timing/Ticker.js';
 import { Target } from '../target/Target.js';
+import { DestroyOptions } from '../timeline/public.js';
 
 export default class Animation {
 	timing: Timing;
@@ -95,9 +96,11 @@ export default class Animation {
 		}
 	}
 
-	destroy() {
-		for (const prop of this._props) {
-			prop.restoreBefore(this.target);
+	destroy(opts: DestroyOptions) {
+		if (!opts.keepValues) {
+			for (const prop of this._props) {
+				prop.restoreBefore(this.target);
+			}
 		}
 
 		this._ticker.unregisterTarget(this.target.inner());

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 = {