https://github.com/anatolelucet/easae
A small utility for easy easings.
https://github.com/anatolelucet/easae
animation animation-library easing easing-functions javascript typescript typescript-library
Last synced: 3 months ago
JSON representation
A small utility for easy easings.
- Host: GitHub
- URL: https://github.com/anatolelucet/easae
- Owner: AnatoleLucet
- License: mit
- Created: 2020-10-28T11:32:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-04T13:41:36.000Z (about 4 years ago)
- Last Synced: 2025-02-28T15:18:27.122Z (4 months ago)
- Topics: animation, animation-library, easing, easing-functions, javascript, typescript, typescript-library
- Language: TypeScript
- Homepage:
- Size: 483 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Easae
A small utility for easy easing.
---
## Features
- Browser AND NodeJs support.
- Built in easing functions.
- Custom easing function.
- Easy to use.
- Custom duration, delay, and framerate.
## Install
```
npm i easae
```
## Usage
```ts
import { easae, easeInCubic } from 'easae';
const modal = document.querySelector('.modal');
easae({
// Easing function you want to use, you can find the list further in the doc.
easing: easeInCubic,
// This function will be called on each tick of the easing.
tick: (t, u) => {
// 't' is going from 0 to 1 and 'u' is going from 1 to 0 (u = 1-t).
// The tick function will be called in a requestAnimationsFrame on the browser, and a setTimeout in Node.
// Bellow - as an example - we set the new scale of the modal.
// But the idea is that you can animate anything in here using 't' and 'u'.
modal.style.transform = `scale(${t})`;
// For example we could set a React state:
setProgressBarWidth(t * 100); // t * 100 so it's in %
},
// The duration of the easing in milliseconds
duration: 300,
// The delay before the easing starts in milliseconds (default is 0)
delay: 100,
// The refresh rate of the easing (default is 60)
rate: 144,
});
```
## Easing functions
You can find the list of every easing functions on https://easings.net. They are all exported from `easae` (for example `import { easeInBounce } from 'easae'`).
Or you can make your own:
```ts
easae({
easing: (x) => x, // linear
tick: (t) => {
// ...
},
duration: 500,
});
```
## Terminal based animations
```js
const { easae, easeOutBounce } = require('easae');
easae({
easing: easeOutBounce,
tick: (t) => {
console.clear();
console.log('■'.repeat(t * 100), '\n');
},
duration: 1300,
});
```
## Chained animations
`easae` returns a promise that resolves when the easing is finished. So you can await this promise, then start the next one.
```ts
import { easae, easeOutBounce, easeInCubic } from 'easae';
async function animate() {
// first
await easae({
easing: easeOutBounce,
tick: (t) => {
// ...
},
duration: 1300,
});
// second
await easae({
easing: easeInCubic,
tick: (t) => {
// ...
},
duration: 500,
});
}
animate();
```
## Examples
See the [examples folder](examples).
## Inspiration
If you're familiar with [Svelte's animation API](https://svelte.dev/docs#animate_fn), you've probably noticed the resemblance.
## License
[MIT](LICENSE)