# @ultraq/transition

> DIY transitions in JavaScript

Latest version **1.1.0** (published 2018-04-05) · 0 weekly downloads

## Install

```sh
npm install @ultraq/transition
pnpm add @ultraq/transition
yarn add @ultraq/transition
bun add @ultraq/transition
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-04-05 |
| First published | 2017-12-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 39 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Emanuel Rabina |
| Maintainers | ultraq |
| Keywords | javascript, transition |

## Links

- npm: https://www.npmjs.com/package/@ultraq/transition
- Repository: https://github.com/ultraq/transition
- Homepage: https://github.com/ultraq/transition#readme
- Issues: https://github.com/ultraq/transition/issues
- npm.io page: https://npm.io/package/@ultraq/transition

## Dependencies (1)

- [bezier-easing](https://npm.io/package/bezier-easing.md) ^2.0.3

## Recent versions

- 1.1.0 (latest) — 2018-04-05
- 1.0.1 — 2017-12-02
- 1.0.0 — 2017-12-02

## README

Transition
==========

[![npm](https://img.shields.io/npm/v/@ultraq/transition.svg?maxAge=3600)](https://www.npmjs.com/package/@ultraq/transition)
[![License](https://img.shields.io/github/license/ultraq/transition.svg?maxAge=2592000)](https://github.com/ultraq/transition/blob/master/LICENSE.txt)

DIY transitions in JavaScript.


Installation
------------

```
npm install @ultraq/transition --save
```


Usage
-----

```javascript
import Transition from '@ultraq/transition';

let transition = new Transition(delta => {
  window.scrollTo(0, delta * 1000);
}, 500, BezierEasing(0.25, 0.1, 0.25, 1.0));
transition.start().then(() => {
  console.log('Done!');
});
```

The `Transition` constructor takes 3 parameters:

 - **callback**: A function that is called at every possible frame with a single
   parameter, a "delta" value between 0.0 and 1.0 to convey at what point the
   current frame through the transition is up to, based on the duration and the
   timing function.
 - **duration**: How long, in milliseconds, the transition should run for.
 - **timingFunction**: optional, the easing function used to calculate the delta
   passed to the transition function.  Defaults to a linear function if not
   specified.

The default timing function is provided by the [bezier-easing](https://github.com/gre/bezier-easing)
library, and so any other curves created by this library are guaranteed to work,
but any library that can define a bezier curve and, given some X value can
return Y on the curve, will suffice.

To kick off the transition, call the `start` method on the transition instance.
This will return a `Promise` that is resolved once the transition duration has
elapsed.

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