# stepanimate

> Animate an object of values between a given start and stop

Latest version **0.1.0** (published 2022-07-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install stepanimate
pnpm add stepanimate
yarn add stepanimate
bun add stepanimate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-07-08 |
| First published | 2022-05-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Christian Ottinger |
| Maintainers | ctottinger |
| Keywords | animation, animate, stepper |

## Links

- npm: https://www.npmjs.com/package/stepanimate
- Repository: https://github.com/ctottinger/StepAnimate
- Homepage: https://github.com/ctottinger/StepAnimate#readme
- Issues: https://github.com/ctottinger/StepAnimate/issues
- npm.io page: https://npm.io/package/stepanimate

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-07-08
- 0.0.2 — 2022-05-13
- 0.0.1 — 2022-05-13

## README

# StepAnimate
## What is this?
StepAnimate is a simple Node module to animate between a startpoint and endpoint, given a total duration and minimum time between steps.

## Installation
```
npm i stepanimate
```

## Usage - simple ints

```javascript
const StepAnimate = require("stepanimate");
...

const animation = new StepAnimate({
	start: 0,
	end: 100,
	duration: 1000,
	stepTime: 100,
});
animation.on("step", (val) => {
	console.log(val);
});
animation.start()
```
This would start a new animation, that would take one second, and emit a new `step` event every 100ms. So in effect, it would emit ten steps, which in this case would mean increments of 10. The value provided to the event listener is the current step.


## Usage - objects of ints

```javascript
const StepAnimate = require("stepanimate");
...

const animation = new StepAnimate({
	start: {
		r: 100,
		g: 100,
		b: 100,
		a: 0,
	},
	end: {
		r: 37,
		g: 100,
		b: 255,
		a: 109,
	},
	duration: 4000,
	stepTime: 1000,
});
animation.on("step", (val) => {
	console.log(val);
});
animation.on("ended", (val) => {
    console.log("Final value: ", val)
})
animation.start()
```

This example does the same thing, but with objects(and over four seconds, with a minimum delay of one second). For each `step`, StepAnimate will pass an identical object, but with the increments of that current step. So for example, the second step of this animation would be passed an object like:

```javascript
{
    r: 68,
    g: 100,
    b: 178,
    a: 56
}
```

## Methods

-   `.start()` - starts the animation and begins emitting `step`s
-   `.stop()` - kills the animation. Can be called from within a step event if something goes wrong.

## Events

-   `step` - emits with each animation step
-   `ended` - emits after the final animation step, with the final value
-   `start` - emits _before_ the first step in the animation
-   `started` - emits _after_ the first step in the animation

---

# Links

-   [NPM package](https://www.npmjs.com/package/stepanimate)
-   [GitHub Repo](https://github.com/ctottinger/StepAnimate)

---
_Source: https://npm.io/package/stepanimate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._