https://github.com/aykutkardas/drain-js

Makes smooth transitions between two numbers.
https://github.com/aykutkardas/drain-js

animation react svelte transition utility vue

Last synced: 3 months ago
JSON representation

Makes smooth transitions between two numbers.

• Host: GitHub
• URL: https://github.com/aykutkardas/drain-js
• Owner: aykutkardas
• License: mit
• Created: 2018-02-20T17:59:24.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-09T06:51:32.000Z (about 3 years ago)
• Last Synced: 2024-09-16T17:25:02.300Z (4 months ago)
• Topics: animation, react, svelte, transition, utility, vue
• Language: TypeScript
• Homepage:
• Size: 280 KB
• Stars: 46
• Watchers: 6
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# drain-js

[![npm](https://img.shields.io/npm/v/drain-js?color=%234fc921)](https://www.npmjs.com/package/drain-js)

[![License](https://img.shields.io/badge/License-MIT-green.svg?color=%234fc921)](https://opensource.org/licenses/MIT)

![Preview](./preview-2.gif)

A callback based utility for making fluent number changes.

## Install

```sh

npm install drain-js

```

```sh

yarn add drain-js

```

## Usage

```js

import drain from 'drain-js';

drain({ start: 3000, end: 2750, onInterval: console.log });

// Output

2906

2812

2803

...

2752

2751

2750

```

![Preview](./preview.gif)

### Parameters

```ts

drain({

  start: Number,

  end: Number,

  speed: Number,

  onInterval: Function,

  onComplete: Function,

});

```

| Name       | Default   | Description                                                                                                  |

| ---------- | --------- | ------------------------------------------------------------------------------------------------------------ |

| speed      | 100       | An animation can be completed in about 10 to 20 steps. The `speed` (ms) value is the time set for each step. |

| start      | undefined | The value at which the animation will start                                                                  |

| end        | undefined | The value at which the animation will end.                                                                   |

| onInterval | undefined | The function that will run at each step until the animation is complete.                                     |

| onComplete | undefined | The function to run when the animation is complete.                                                          |

### Demo List

| Name             | Status | Type                              | URL                                                                          |

| ---------------- | ------ | --------------------------------- | ---------------------------------------------------------------------------- |

| Demo Simple      | ✔️     | Number Transition                 | [Link](https://codepen.io/aykutkardas/pen/BadxjbM?editors=1010)              |

| Demo             | ✔️     | CSS Animation & Number Transition | [Link](https://codepen.io/aykutkardas/pen/QWMaeqw?editors=1010)              |

| Demo with React  | ✔️     | CSS Animation & Number Transition | [Link](https://codesandbox.io/s/drain-js-react-demo-crzyu)                   |

| Demo with Vue    | ✔️     | CSS Animation & Number Transition | [Link](https://codesandbox.io/s/drain-js-vue-demo-pisdm?file=/src/App.vue)   |

| Demo with Svelte | ✔️     | CSS Animation & Number Transition | [Link](https://codesandbox.io/s/drain-js-svelte-demo-i2m3e?file=/App.svelte) |