# @urpflanze/animation
> Urpflanze package
Latest version **0.1.3** (published 2021-09-14) · GPL-3.0-or-later license · 0 weekly downloads
## Install
```sh
npm install @urpflanze/animation
pnpm add @urpflanze/animation
yarn add @urpflanze/animation
bun add @urpflanze/animation
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-09-14 |
| First published | 2021-07-25 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 492.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Gennaro Bosone |
| Maintainers | genbs |
| Keywords | urpflanze, animation, easings, typescript |
## Links
- npm: https://www.npmjs.com/package/@urpflanze/animation
- Repository: https://github.com/urpflanze-org/animation
- Homepage: https://docs.urpflanze.org/animation/
- Issues: https://github.com/urpflanze-org/animation/issues
- Funding: https://ko-fi.com/urpflanze
- npm.io page: https://npm.io/package/@urpflanze/animation
## Dependencies (2)
- [bezier-easing](https://npm.io/package/bezier-easing.md) ^2.1.0
- [standard-version](https://npm.io/package/standard-version.md) ^9.3.1
## Alternatives
- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads
## Recent versions
- 0.1.3 (latest) — 2021-09-14
- 0.1.2 — 2021-07-31
- 0.1.1 — 2021-07-29
- 0.1.0 — 2021-07-25
## README
## Synopsis
This package is used by the [Urpflanze](https://github.com/urpflanze-org/urpflanze) javascript library to create animations.
You can use it in browser or in Node.
The main purpose is to interpolate values based on time.
## Donate
I am trying to create a tool for those who want to approach the world of programming
or for programmers who want to approach the world of creative coding.
I have spent a lot of time and will spend more to support this project.
I also have in mind a **[web editor](https://github.com/urpflanze-org/editor)** (open-source) where you can use the features of this library in the browser.
You can see a preview [here](https://editor.urpflanze.org)
[](https://www.paypal.me/genbs)
[](https://ko-fi.com/urpflanze)
[](https://explorer.btc.com/btc/address/1CSQq4aMmsA71twvyZHZCjmeB2AmQGCPNq)
[](https://etherscan.io/address/0x9086c4bb7015c1d6dc79162d02e7e1239c982c01)
---
## Menu
- [Synopsis](#synopsis)
- [Donate](#donate)
- [Menu](#menu)
- [Installation](#installation)
- [Create Animation](#create-animation)
- [Animation parameters](#animation-parameters)
- [Interpolation functions](#interpolation-functions)
- [Interpolation and Easings](#interpolation-and-easings)
- [Utilities](#utilities)
## Installation
You can install the library with the command:
```bash
npm i @urpflanze/animation --save
```
And import into your project
```javascript
/**
* Full importing
*/
import * as Animation from '@urpflanze/animation'
const anim = Animation.Simple({ from: 0, to: 100, duration: 1000 })
const value = anim([currentTime])
// Or
const animObj = Animation.createAnimation({ from: 0, to: 100, duration: 1000 })
animObj.update([currentTime])
animObj.value // current animation value
```
Otherwise you can use from the browser using a CDN
```html
```
## Create Animation
```javascript
const anim = Animation.Simple({
from: 0,
to: 100,
duration: 1000,
loop: 2,
})
// total animation duration 2000 (1000 * 2 loop)
console.log(anim(-10)) // 0 (not started)
console.log(anim(0)) // 0 (started)
console.log(anim(500)) // 50 (loop: 1)
console.log(anim(1500)) // 50 (loop: 2)
console.log(anim(2200)) // 100 (ended)
```
### Animation parameters
| Name | Type | default | Description |
| ------------------- | ------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
| from | number \| string \| Array | - | start value |
| to | number \| string \| Array | - | end value |
| duration | number | 1000 | Animation duration in milliseconds |
| direction | normal \| reverse \| alternate | normal | Direction of animation. Alternate goes from 'from' to 'to' and from 'to' to 'from' |
| loop | number \| boolean | false | Define a number of repetitions |
| interpolator | TInterpolator | | Type of value interpolation |
| delay | number | 0 | Delay of animation start |
| afterDelay | number | 0 | Delay after animation end loop |
| round | number | | decimal to be rounded |
| colorTransitionMode | hue \| rgb | rgb | color interpolation mode (from and to) |
## Interpolation functions
You can pass the `interpolator` property as a string or as an object to pass parameters:
```javascript
const animElastic = Animation.Simple({
from: 0,
to: 100,
duration: 1000,
interpolator: 'elasticOut',
})
const animElasticWithParams = Animation.Simple({
from: 0,
to: 100,
duration: 1000,
interpolator: {
type: 'elasticOut',
params: {
amplitude: 2,
},
},
})
```
### Interpolation and Easings
| Name | Params |
| ---------------- | ----------------- |
| wave | phase |
| cubicBezier | x1, x2, y1, y2 |
| linear | |
| quadraticIn | |
| quadraticOut | |
| quadraticInOut | |
| cubicIn | |
| cubicOut | |
| cubicInOut | |
| quarticIn | |
| quarticOut | |
| quarticInOut | |
| quinticIn | |
| quinticOut | |
| quinticInOut | |
| sinusoidalIn | |
| sinusoidalOut | |
| sinusoidalInOut | |
| exponentialIn | |
| exponentialOut | |
| exponentialInOut | |
| circularIn | |
| circularOut | |
| circularInOut | |
| bounceIn | |
| bounceOut | |
| bounceInOut | |
| backIn | overshoot |
| backOut | overshoot |
| backInOut | overshoot |
| elasticIn | amplitude, period |
| elasticOut | amplitude, period |
| elasticInOut | amplitude, period |
## Utilities
For more complex animations you can use utility methods:
```javascript
import { clock, clockOffset, Easings } from '@urpflanze/animation'
requestAnimationFrame(time => {
// from 0 to 1000 and from 1000 to 0, total duration 2000ms (loop)
const animationTime = clock(time, 1000, true, 'alternate')
const value = Easings.bounceOut(animationTime, 100, 200, 1000)
// or
// const animationTimeOffset = clockOffset(time, 1000, true, 'alternate')
// const value = Easings.bounceOut(animationTimeOffset, 100, 200)
})
```
---
_Source: https://npm.io/package/@urpflanze/animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._