https://github.com/kefniark/micro-fatina

Micro tweening library (design to be used in js13k)
https://github.com/kefniark/micro-fatina

animation js library lightweight tween

Last synced: 8 days ago
JSON representation

Micro tweening library (design to be used in js13k)

• Host: GitHub
• URL: https://github.com/kefniark/micro-fatina
• Owner: kefniark
• Created: 2019-06-29T15:09:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T18:13:09.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T12:46:12.439Z (7 months ago)
• Topics: animation, js, library, lightweight, tween
• Language: JavaScript
• Homepage:
• Size: 143 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Micro fatina

Micro Tween library for js13k, keep the basic features from [Fatina](https://www.npmjs.com/package/fatina) but stripped to the maximum:

* Less than 2KB

* Provides events (`onStarted`, `onCompleted`, `onKilled`)

* Fewer Easings (you can add back the one you need)

* Sequence are replaced by a simple `.append` method to chain them

* Well Unit tested

## Samples

### Tweens

```js

import { tween } from 'micro-fatina'

// let's use any type of object to animate

var obj = { x: -2000, y: 150 }

// move the object to a new position in 2 seconds

var t = tween(obj, { x: -150, y: 100 }, 2)

// use events

t.onStarted.push(() => console.log('tween started !'))

t.onCompleted.push(() => console.log('tween completed !'))

```

### Chains

you can chain tweens (here the chain takes 5s)

```js

// append a new move after the first one

tween(obj, { x: -150, y: 100 }, 2)

    .append(tween(obj, { x: 0, y: 150 }, 1))

    .append(tween(obj, { x: 0, y: 250 }, 1))

    .append(tween(obj, { x: 0, y: 350 }, 1))

```

or run them in parallel (here the chain takes 3s)

```js

// append a new move after the first one

const t = tween(obj, { x: -150, y: 100 }, 2)

t.append(tween(obj, { x: 0 }, 1))

t.append(tween(obj, { y: 250 }, 1))

```