# kenburns

> Ken Burns Effect – panning and zooming animation on an image.

Latest version **2.0.3** (published 2016-12-23) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2016-12-23 |
| First published | 2014-09-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 77 |
| Author | Gaëtan Renaudeau |
| Maintainers | gre |
| Keywords | kenburns, crop, panning, zooming, animation, browser |

## Links

- npm: https://www.npmjs.com/package/kenburns
- Repository: https://github.com/gre/kenburns
- Issues: https://github.com/gre/kenburns/issues
- npm.io page: https://npm.io/package/kenburns

## Dependencies (7)

- [raf](https://npm.io/package/raf.md) ^3.3.0
- [rect-mix](https://npm.io/package/rect-mix.md) 0.0.x
- [gl-shader](https://npm.io/package/gl-shader.md) ^4.2.1
- [invariant](https://npm.io/package/invariant.md) ^2.2.2
- [rect-crop](https://npm.io/package/rect-crop.md) 0.0.x
- [rect-clamp](https://npm.io/package/rect-clamp.md) 0.0.x
- [draw-image-normalized](https://npm.io/package/draw-image-normalized.md) 0.1.x

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2016-12-23
- 2.0.2 — 2016-12-15
- 2.0.1 — 2016-12-15
- 2.0.0 — 2016-12-15
- 1.1.2 — 2015-10-24
- 1.1.1 — 2015-02-16
- 1.0.2 — 2014-10-06
- 1.0.1 — 2014-10-06
- 1.0.0 — 2014-10-06
- 0.5.0 — 2014-10-05
- 0.4.1 — 2014-10-05
- 0.4.0 — 2014-10-05
- 0.3.2 — 2014-10-01
- 0.3.1 — 2014-10-01
- 0.3.0 — 2014-10-01
- … 3 more at https://npm.io/package/kenburns/versions

## README

# kenburns

**kenburns** provides a [Ken Burns Effect](https://en.wikipedia.org/wiki/Ken_Burns_effect) on an image.

Kenburns currently have implementations for **Canvas 2D**, **Canvas WebGL**, and vanilla **DOM**.

```sh
npm install --save kenburns
```

or [**standalone version** (`window.KenBurns`)](https://unpkg.com/kenburns@latest/kenburns.js).

## Usage

You can specifically import only one implementation:

```js
import KenBurnsDOM from "kenburns/lib/DOM";
import KenBurnsWebGL from "kenburns/lib/WebGL";
import KenBurnsCanvas2D from "kenburns/lib/Canvas2D";
```

Or import them all (leads to more dependencies in your bundle):

```js
import KenBurns from "kenburns";
// KenBurns.DOM , KenBurns.WebGL , KenBurns.Canvas2D
// KenBurns.Canvas is also a variant that feature detect WebGL or Canvas2D
```

## [API](API.md)

Quick DOM example:

![](https://cloud.githubusercontent.com/assets/211411/21234525/4041de56-c2f3-11e6-8830-2a3cdeac89bb.gif)

```js
import KenBurnsDOM from "kenburns/lib/DOM";
import rectCrop from "rect-crop";
import bezierEasing from "bezier-easing";
const image = new Image();
image.src = "http://i.imgur.com/Uw2EQEk.jpg";
image.onload = () => {
  var div = document.createElement("div");
  document.body.appendChild(div);
  div.style.width = "400px";
  div.style.height = "400px";
  var kenBurns = new KenBurnsDOM(div);
  kenBurns.animate(
    image,
    rectCrop(0.4, [0.15, 0.38]),
    rectCrop.largest,
    5000,
    bezierEasing(0.6, 0.0, 1.0, 1.0)
  );
};
```

There is also `KenBurnsWebGL` (WebGL implementation) and `KenBurnsCanvas2D` (Canvas2D implementation).

## Example

- [source code](example)
- [website](http://kenburns.surge.sh/)

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