The-OA

A reactive animation library.

• Observable-base: Everything is observable (Rxjs)!
• Fast: Dispatch value on animation frame without any waste.
• Tiny: Only 4 kb (without gzip)

Install

npm install the-oa --save

or

yarn add the-oa

Usage

import { tween, easing } from 'the-oa';

const squareDOM = document.getElementById('square');

tween({
  from: { x: 0, r: 0 },
  to: { x: 500, r: 180 },
  duration: 1200,
  ease: easing.backOut,
}).subscribe(({ x, r }) => {
  squareDOM.style.transform = `translateX(${x}px) rotateZ(${r}deg)`;
});

Demo

API

tween(config): Observable

Arguments

• config :

{
    from: any,
    to: any,
    duration?: number,
    ease?: function
}