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

• source code
• website