the-oa

observable-base animation

Usage no npm install needed!

<script type="module">
  import theOa from 'https://cdn.skypack.dev/the-oa';
</script>

README

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

Edit the-oa

API

tween(config): Observable

Arguments

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