# @crossani/spring

> A silky smooth spring animation library

Latest version **1.1.0** (published 2022-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @crossani/spring
pnpm add @crossani/spring
yarn add @crossani/spring
bun add @crossani/spring
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-11-29 |
| First published | 2022-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cain Atkinson |
| Maintainers | yellowsink |

## Links

- npm: https://www.npmjs.com/package/@crossani/spring
- npm.io page: https://npm.io/package/@crossani/spring

## Recent versions

- 1.1.0 (latest) — 2022-11-29
- 1.0.4 — 2022-11-03
- 1.0.3 — 2022-06-16
- 1.0.2 — 2022-06-16
- 1.0.1 — 2022-06-16
- 1.0.0 — 2022-06-13

## README

# CrossAni spring

A silky smooth spring animation tool built on CrossAni.

## Installation

- `npm i @crossani/spring`
- `pnpm i @crossani/spring`
- `yarn add @crossani/spring`

## Usage

1. Import `@crossani/spring`
2. Make your divs bouncy
```js
import "@crossani/spring";

const box = document.getElementById("box");
box.doSpring(
  0, // start value - used for math calculations but not transitioning
  100, // target value
  "margin", // prop
  "px", // unit OR template to place current value into
  // OPTIONAL - spring config - defaults shown
  {
    mass: 1, // how heavy the weight on the spring is
    damping: 4, // how quickly the spring loses energy
    stiffness: 40, // how much force the spring wants to apply
    // you should not need to touch these two at all
    // only touch if you have issues e.g. super high frequency springs
    samples: 50, // internal, calculation samples
    restThres: .1 // internal, thres to consider a spring at its target
  }
);

// example for template instead of unit
box.doSpring(0, 100, "transform", "translateX(<>px)");
```

3. Stop any currently moving springs
Will not immediately snap animations to completion, but will stop at the next key point.
```js
box.abortSprings();
```

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