npm install --save rekapi
Download • Source
- 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
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.
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
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