animate-store

ABOUT animate-store

This is a TypeScript/JavaScript library for website's animated expression. This library does not depend on DOM operation directly, so that it is acceptable to most of view libraries (e.g. React, jQuery) .

INSTALL

$ npm install animate-store

USAGE (TypeScript & React)

With running anim.move(), render() will be called at each timing of window.requestAnimationFrame .

import * as Animate from 'animate-store';
import * as ReactDOM from 'react-dom';

let anim: Animate.Animation = new Animate.Animation([0], (p) => {
	render({ x: p[0] });
});

let x: number = 0;
function render(state?: { x: number }): void {
	x = state ? state.x : x;
	ReactDOM.render(
		<div style={{ position: 'relative', left: Math.floor(x) }}>
			This will move 200px left 0.5 seconds.
		</div>,
		document.querySelector('.app')
	);
}

anim.move(
	{
		next: { value: 200, curve: Animate.Curve.linear  },
		duration: 500
	}
);

NOTE: In actual development with React, state, x had better be defined in established place, such as state in React.Component.

DEVELOP

$ npm install
$ npm run build:main

TEST

$ npm test