Skip to content
Ken Burns effect for DOM, Canvas2D, WebGL
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ reimplementing the library to merge in the core & implementations Dec 15, 2016
example
src
.babelrc
.eslintrc.js
.flowconfig
.gitignore
API.md
LICENSE
README.md
documentation.yml
package.json
yarn.lock

README.md

kenburns

kenburns provides a Ken Burns Effect on an image.

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

npm install --save kenburns

or standalone version (window.KenBurns).

Usage

You can specifically import only one implementation:

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):

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

API

Quick DOM example:

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

You can’t perform that action at this time.