chnobli 0.1.0 → 0.1.2

package/src/chnobli.js

@@ -0,0 +1,64 @@
+import Animation from './animation/public.js';
+import Timeline from './timeline/public.js';
+import Scroll from './scroll/public.js';
+import { stagger as _stagger } from './stagger/stagger.js';
+
+
+// todo maybe add, to, from and fromTo to the animate function
+
+
+export function animate(targets, props = {}) {
+	return new Animation(targets, props);
+}
+
+export function timeline(props = {}) {
+	return new Timeline(props);
+}
+
+export function stagger(value) {
+	return _stagger(value);
+}
+
+export function scroll(props = {}) {
+	return new Scroll(props);
+}
+
+/*
+
+animate(target, {
+	
+	// special
+	// translate
+	x
+	y
+	scale
+	scaleX
+	scaleY
+	rotation
+	skew
+	skewX
+	skewY
+
+
+	
+	// stagger
+	repeatDelay
+	stagger: {
+    // wrap advanced options in an object
+    each: 0.1,
+    from: "center",
+    grid: "auto",
+    ease: "power2.inOut",
+    repeat: -1, // Repeats immediately, not waiting for the other staggered animations to finish
+  },
+
+
+	ease,
+	duration,
+	repeat, (-1?)
+	repeatDelay?
+	delay,
+	alternate
+})
+
+*/

package/src/scroll/event.js

@@ -0,0 +1,41 @@
+export default class ScrollEvent {
+	constructor() {
+		this._listeners = new Set;
+
+		window.addEventListener('scroll', e => this._onScroll(e));
+	}
+
+	static global() {
+		if (typeof window === 'undefined')
+			return null;
+
+		if (typeof window.chnobliScroll === 'undefined')
+			window.chnobliScroll = new ScrollEvent;
+		return window.chnobliScroll;
+	}
+
+	add(fn) {
+		this._listeners.add(fn);
+
+		return {
+			remove: () => {
+				this.remove(fn);
+			}
+		};
+	}
+
+	remove(fn) {
+		this._listeners.delete(fn);
+	}
+
+	_onScroll(e) {
+		for (const fn of this._listeners) {
+			fn({
+				y: window.scrollY,
+				height: window.innerHeight
+			}, {
+				remove: () => this.remove(fn)
+			});
+		}
+	}
+}

package/src/scroll/public.js

@@ -0,0 +1,17 @@
+import Scroll from './scroll.js';
+
+export default class PublicScroll {
+	/*
+	{
+		start: el | px
+		startView: 'top'
+	}
+	*/
+	constructor(props = {}) {
+		this._inner = new Scroll(props);
+	}
+
+	add(timeline) {
+		this._inner.addTimeline(timeline);
+	}
+}

package/src/scroll/scroll.js

@@ -0,0 +1,169 @@
+import { takeProp } from '../utils/internal.js';
+import { pageOffset } from '../utils/utils.js';
+import ScrollEvent from './event.js';
+
+/*
+run animation when in view (start stop resume when different events happen)
+
+
+
+specify when trigger starts: start: "top(triggerEl) center(viewport)"
+end: bottom top
+
+
+startTriger
+
+endTrigger
+
+
+skew on scroll
+
+scroll pin (once in trigger zone, elements keeps it position relative to start of trigger)
+
+parallax
+*/
+
+
+export default class Scroll {
+	constructor(props = {}) {
+		// { target, offset }
+		this._start = parseStart(takeProp(props, 'start', null));
+		// { target, offset }
+		this._end = parseEnd(takeProp(props, 'end', null));
+		this._globalEvent = ScrollEvent.global();
+
+		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.timelines = [];
+
+		this._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
+		this._initialized = false;
+	}
+
+	addTimeline(timeline) {
+		this.timelines.push(timeline);
+	}
+
+	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;
+		}
+	}
+
+	_onScroll({ y, height }) {
+		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;
+
+		const dif = end - start;
+		const x = 1 - (end - y) / dif;
+
+		for (const timeline of this.timelines) {
+			timeline.seek(x);
+		}
+	}
+}
+
+function parseStart(val) {
+	// 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';
+
+	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);
+		}
+	} else {
+		throw new Error('unknown start val');
+	}
+
+	return {
+		target: element,
+		offset: parseOffset(offset)
+	};
+}
+
+function parseEnd(val) {
+	// might be an object { target, offset }
+	if (!val)
+		return null;
+
+	let element = null;
+	let offset = 'top';
+
+	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);
+		}
+	} else {
+		throw new Error('unknown start val');
+	}
+
+	return {
+		target: element,
+		offset: parseOffset(offset)
+	};
+}
+
+function parseOffset(val) {
+	if (typeof val === 'string') {
+		if (val === 'top')
+			return 0;
+
+		if (val === 'center')
+			return .5;
+
+		if (val === 'bottom')
+			return 1;
+
+		throw new Error('unknown view value ' + val);
+	}
+
+	if (!(typeof val === 'number')) {
+		throw new Error(
+			'view expecting to be a top/center/bottom or a percent value'
+		);
+	}
+
+	return val;
+}	

package/src/stagger/stagger.js

@@ -0,0 +1,45 @@
+// export class StaggerFunction {
+
+// }
+
+function isStagger(value) {
+	return typeof value === 'object' &&
+		value !== null &&
+		typeof value.__isStagger__ === 'function';
+}
+
+export function callStagger(value, i, l) {
+	if (isStagger(value))
+		return value.call(i, l);
+
+	return value;
+}
+
+export function staggerMap(value, fn) {
+	if (isStagger(value))
+		return new Stagger((...args) => fn(value.call(...args)));
+
+	return fn(value);
+}
+
+export function stagger(value) {
+	return new Stagger(value);
+}
+
+class Stagger {
+	constructor(value) {
+		if (typeof value === 'function') {
+			this.fn = value;
+			return;
+		}
+
+		// if (value === )
+		throw new Error('unknown stagger value ' + value);
+	}
+
+	call(...args) {
+		return this.fn(...args);
+	}
+
+	__isStagger__() {}
+}

package/src/timeline/public.js

@@ -0,0 +1,154 @@
+import { takeProp } from '../utils/internal.js';
+import Timeline from './timeline.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;
+const STATE_PLAYING = 2;
+
+export default class PublicTimeline {
+	constructor(props = {}) {
+		this._defaults = takeProp(props, 'defaults', {});
+		this._inner = new Timeline(props);
+
+		// 'start', 'end'
+		this._events = new Events;
+
+		this._state = STATE_PAUSED;
+		this._runningTicker = null;
+	}
+
+	set(targets, props, offset = null) {
+		// for the moment let's just add as usual but set the duration to 0
+		return this.add(targets, { ...props, duration: 0 }, offset);
+	}
+
+	add(targets, props, offset = null) {
+		if (Array.from(targets).length === 0)
+			targets = [targets];
+		else
+			targets = Array.from(targets);
+
+		let i = -1;
+		for (const target of targets) {
+			i++;
+
+			const nProps = {
+				...this._defaults,
+				...props
+			};
+
+			for (const prop in nProps) {
+				nProps[prop] = callStagger(nProps[prop], i, targets.length);
+			}
+
+			const nOffset = callStagger(offset, i);
+
+			this._inner.add(target, nProps, nOffset, i);
+		}
+
+		return this;
+	}
+
+	label(label, offset = null) {
+		this._inner.label(label, offset);
+
+		return this;
+	}
+
+	play() {
+		if (this._state === STATE_PLAYING)
+			return;
+
+		this._state = STATE_PLAYING;
+
+		this._startTicker();
+
+		return this;
+	}
+
+	pause() {
+		if (this._state === STATE_PAUSED)
+			return;
+
+		this._state = STATE_PAUSED;
+
+		this._stopTicker();
+	}
+
+	// 0-1
+	seek(pos) {
+		this._inner.init();
+
+		this._inner.seek(pos);
+
+		if (this._state !== STATE_PLAYING)
+			this._state = STATE_RENDER_ONCE;
+
+		this._startTicker();
+	}
+
+	reset() {
+		this._inner.seek(0);
+	}
+
+	reverse() {
+		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;
+			}
+
+			if (this._state === STATE_PLAYING)
+				this._inner.advance(change);
+
+			// todo when we add smooth seeks we need to update this
+
+			this._inner.render();
+
+			// we rendered once let's stop
+			if (this._state === STATE_RENDER_ONCE) {
+				this._state = STATE_PAUSED;
+				this._stopTicker();
+			}
+		});
+	}
+
+	_stopTicker() {
+		if (!this._runningTicker)
+			return;
+
+		this._runningTicker.remove();
+		this._runningTicker = null;
+	}
+
+	// update() {
+	// 	console.log('render');
+	// 	this._inner.render();
+	// }
+}