<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

# KenBurnsBase

[src/Base.js:49-133](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L49-L133 "Source code on GitHub")

KenBurns base class. 2 methods must be implemented: `draw()` and `getViewport()`.

**Properties**

-   `clamped` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** guarantees the rendering never goes out of bound. _(default: `true`)_.
-   `background` **[RGBA](#rgba)** background color as an Array of 4 numbers (in 0..1 range). _(default: `[0,0,0,0]`, transparent)_

## animate

[src/Base.js:65-90](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L65-L90 "Source code on GitHub")

Start a KenBurns animation on `source` in a loop for the next `duration` milliseconds from `fromCrop` to `toCrop` with given `easing` function.

> `source` MUST be ready (e.g. image loaded) before calling `animate`.
> Also, the animation is not interruptable, For better controls, please use `animateStep()`.

**Parameters**

-   `source` **Source** , the source to animate (the type depends on implementation, refer to implementation 'supported source')
-   `fromCrop` **([CropFunc](#cropfunc) \| [Bound](#bound))** , an array of `[ x, y, width, height ]` which is the starting bound absolute coordinate. **OR** a `(viewportSize,imageSize)=>Bound` which returns this array _(the viewportSize and imageSize parameters have width and height fields)_. `KenBurns.crop()` provide such a function.
-   `toCrop` **([CropFunc](#cropfunc) \| [Bound](#bound))** , same as `startCrop` but for the ending bound coordinate.
-   `duration` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** , the duration in millisecond of the animation.
-   `easing` **[EasingFunc](#easingfunc)?** , The easing function to use for the animation. We recommend the use of [Bezier-Easing](https://npmjs.org/package/bezier-easing).

Returns **[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)&lt;Source>** a Promise that is resolved when the animation ends.

## animateStep

[src/Base.js:101-117](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L101-L117 "Source code on GitHub")

Perform a single frame of a Kenburns animation on `source` from `fromCrop` to `toCrop` with a `progress` interpolation value.

> `animateStep` provides a better rendering control than `animate` but also is low level. It's up to you to handle the animation loop.

**Parameters**

-   `source` **Source** (same as in `animate`)
-   `fromCrop` **([CropFunc](#cropfunc) \| [Bound](#bound))** (same as in `animate`)
-   `toCrop` **([CropFunc](#cropfunc) \| [Bound](#bound))** (same as in `animate`)
-   `progress` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** the interpolation value from 0 to 1.

Returns **void** 

## draw

[src/Base.js:122-122](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L122-L122 "Source code on GitHub")

**(abstract method)** Draw the source cropped to a given rectangle bound.

Type: function (source: Source, rect: [Bound](#bound)): void

## getViewport

[src/Base.js:127-127](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L127-L127 "Source code on GitHub")

**(abstract method)** Get and object with width and height of the container.

Type: function (): [WidthHeight](#widthheight)

## getSourceSize

[src/Base.js:132-132](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L132-L132 "Source code on GitHub")

**(abstract method)** Get source size.

Type: function (source: Source): [WidthHeight](#widthheight)

# KenBurnsDOM

[src/DOM.js:26-72](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/DOM.js#L26-L72 "Source code on GitHub")

**Extends KenBurnsBase**

DOM Kenburns effect.

**Supported source:** any HTML Element or an `Image`.

NB: the container & source DOM element style are getting mutated by KenBurnsDOM. Make sure you don't alter them while performing the effect.

**Examples**

```javascript
import KenBurnsDOM from "kenburns/lib/DOM";
var div = document.createElement("div");
div.style.width = "400px";
div.style.height = "400px";
const kenBurnsDOM = new KenBurnsDOM(div);
// kenBurnsDOM.animate(...).then(...);
// kenBurnsDOM.animateStep(...);
```

## constructor

[src/DOM.js:33-42](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/DOM.js#L33-L42 "Source code on GitHub")

Create a DOM KenBurns with a container element (block element recommended).

**Parameters**

-   `container` **[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)** 

# KenBurnsWebGL

[src/WebGL.js:53-120](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/WebGL.js#L53-L120 "Source code on GitHub")

**Extends KenBurnsBase**

WebGL KenBurns implementation.

**supported source:** a `gl-texture2d` instance. (or an object with a bind() function and shape array)

**Examples**

```javascript
import KenBurnsWebGL from "kenburns/lib/WebGL";
var canvasWebGL = document.createElement("canvas");
canvasWebGL.style.width = "400px";
canvasWebGL.style.height = "400px";
canvasWebGL.width = 800;
canvasWebGL.height = 800;
const gl = canvasWebGL.getContext("webgl");
const kenBurnsWebGL = new KenBurnsWebGL(gl);
// import createTexture from "gl-texture2d";
// const texture = createTexture(gl, ...);
// kenBurnsWebGL.animate(texture, ...).then(...);
// kenBurnsWebGL.animateStep(texture, ...);
```

## constructor

[src/WebGL.js:61-77](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/WebGL.js#L61-L77 "Source code on GitHub")

Create a KenBurnsWebGL with a WebGL Context.

**Parameters**

-   `gl` **[WebGLRenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)** 

## dispose

[src/WebGL.js:81-89](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/WebGL.js#L81-L89 "Source code on GitHub")

clean up object created by the implementation. This allows to potentially continue using the WebGL Canvas for other things.

# KenBurnsCanvas2D

[src/Canvas2D.js:27-62](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Canvas2D.js#L27-L62 "Source code on GitHub")

**Extends KenBurnsBase**

Canvas2D KenBurns implementation.

**supported source:** Image | Video | Canvas2D

**Examples**

```javascript
import KenBurnsCanvas2D from "kenburns/lib/Canvas2D";
var canvas2d = document.createElement("canvas");
canvas2d.style.width = "400px";
canvas2d.style.height = "400px";
canvas2d.width = 800;
canvas2d.height = 800;
const ctx = canvas2d.getContext("2d");
const kenBurnsCanvas2d = new KenBurnsCanvas2D(ctx);
// kenBurnsCanvas2d.animate(...).then(...);
// kenBurnsCanvas2d.animateStep(...);
```

## constructor

[src/Canvas2D.js:33-36](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Canvas2D.js#L33-L36 "Source code on GitHub")

Create a Canvas2D KenBurns with a Canvas 2D Context.

**Parameters**

-   `ctx` **[CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)** 

# crop

[src/index.js:24-24](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/index.js#L24-L24 "Source code on GitHub")

`import crop from`[`"react-crop"`](https://www.npmjs.com/package/rect-crop)`;`

To ease the process of providing fromCrop and endCrop, `crop` is a helper that that computes the absolute croping rectangle for a given center and zoom.

**Parameters**

-   `zoomRatio`  : The first parameter is the **zoom ratio**. (this zoom ratio must be in `]0.0, 1.0]` range) _For instance, 1.0 display the full image size, 0.01 display a very tiny part of the image_.
-   `center`  : The second parameter is the **center** of the effect (the [w,h] components are in percentage from 0.0 to 1.0). This parameter is optional, if not provided, the center is used.

**Examples**

```javascript
var from = crop(1.0, [0.5, 0.5]);
var to = crop(0.2, [0.8, 0.5]);
kenBurns.animate(img, from, to, 4000);
// Checkout also this special value: `crop.largest`
```

# Bound

[src/Base.js:11-11](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L11-L11 "Source code on GitHub")

An array of [x, y, width, height]

Type: \[[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]

# RGBA

[src/Base.js:17-17](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L17-L17 "Source code on GitHub")

A background color as an array of 0..1 numbers.

Type: \[[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]

# WidthHeight

[src/Base.js:23-26](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L23-L26 "Source code on GitHub")

An object with a width and height property.

Type: {width: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), height: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)}

**Properties**

-   `width` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 
-   `height` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** 

# CropFunc

[src/Base.js:31-31](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L31-L31 "Source code on GitHub")

A function that returns a bound crop for a given viewport and source size.

Type: function (viewport: [WidthHeight](#widthheight), sourceSize: [WidthHeight](#widthheight)): [Bound](#bound)

# EasingFunc

[src/Base.js:36-36](https://github.com/gre/kenburns/blob/2e5ccf16bad431e68181dacc6f366bb7208ef843/src/Base.js#L36-L36 "Source code on GitHub")

An easing function.

Type: function (x: [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)): [number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)