Rekapi

A JavaScript Keyframe Library

npm install --save rekapi

Download • Source

Rekapi is a keyframe animation library for JavaScript. It gives you an API for:

• Defining keyframe-based animations
• Controlling animation playback

Rekapi is renderer-agnostic. At its core, Rekapi does not perform any rendering. However, it does expose an API for defining renderers, and comes bundled with renderers for the HTML DOM and HTML5 2D <canvas>.

Rekapi officially supports Evergreen browsers and is published as a UMD module.

See the Pen Rekapi Confetti by Jeremy Kahn (@jeremyckahn) on CodePen.

What is keyframing?

Keyframing is an animation technique for defining states at specific points in time. Keyframing allows you to declaratively define the points at which an animation changes. All of the frames that exist between keyframes are interpolated for you. It is a powerful way to construct a complex animation!

How do I use Rekapi?

Using Rekapi boils down to four steps:

• Define one or more actors
• Add actors to the animation
• Define keyframe states for the actors
• Play the animation

For a fuller explanation with a runnable example, check out the Getting Started guide.

Rendering

Rekapi works by providing state data to the actors for every frame. The actors then render the data according to their rendering context. Rekapi treats rendering contexts generically, and you can create new ones as needed.

Rekapi ships with rekapi.CanvasRenderer and rekapi.DOMRenderer which are designed to cover a variety of common use cases. However, you can create your own rekapi.renderer-like class to fit whatever use case you have.