Getting Started

1. Manual Installation

Download the library and include it in your code:

<script src="fatina.esm.js"></script>

1 bis. NPM Installation

More advanced users might want to use npm

npm install fatina

Then include the Fatina module :

// standard import with typescript
import Fatina from 'fatina'

// OR standard node.js require
const Fatina = require('fatina')

// OR Deno
import Fatina from 'https://cdn.skypack.dev/fatina'

2. Done !

Now you can use Fatina properly :

Fatina.tween( /* etc */ ).start();

3. Example with Tween (Docs)

const yourObj = { x: 0, y: 0 };

// Create a tween to move the object to the wanted position
Fatina.tween(yourObj)
  .to({ x: 100 }, 250)
  .onStart(() => console.log('animation finished !'))
  .onComplete(() => console.log('animation finished !'))
  .start();

4. Example with Transition Syntax (Docs)

const yourObj = { x: 0, y: 0 };

// Create a transition
const transition = Fatina.transition(yourObj);

// With Callback: Move the object to the wanted position in 250ms
transition.to({ x: 100 }, 250); // => return a tween

// With Async/Await: Move the object to the wanted position in 250ms and wait for the completion
await transition.promiseTo({ x: 200 }, 250);