Overview
React Ensemble is a library for building animations in React. It's designed to help with longer animations that need to have precise timing or a lot of moving parts.
If you want to dive right in with some interactive examples, check out the Quick Start. To learn what this library is all about, read on.
Motivation
Once upon a time, I was working on a React project that needed to animate blocks of text in perfect sync with an audio track. While there were several animation libraries out there already, none of them seemed to provide two key features I needed:
First, I needed precise absolute timing. Usually, we think of web animations as transitions with relative times. A UI element might "fade in for 0.5 seconds" or "rotate 180 degrees over 1 second." But since I was working with an audio track, I had to work in terms of absolute timestamps. My elements needed to "fade in at 01:35.2 and fade out at 01:38.7."
Second, I wanted to keep my animation data and rendering logic separate. A common way to script web animations is to tie smaller transitions to specific DOM elements. For example, a button may be scripted to shine when a user hovers over it. This method is great for gestures and aesthetics, but it isn't well suited to longer animations.
I needed a system that could take my data and my timestamps (essentially, my animation's script) and tell me what to render at any given moment. And so, React Ensemble was born!
Main Features
React Ensemble is designed to provide the animator (that's you!) with three main abilities:
Granular Control
The track parsing engine in React Ensemble is capable of handling complex animations with many moving parts, layers, groups, and loops.
React Ensemble lets you control as many tiny details of your animation as you'd like. While there are some utility functions you may use to simplify things, they are totally optional.
Immediate Playback
Having a quick feedback loop is vital to making animating fun. React Ensemble has customizable playback control components that do not require any configuration to get started.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Rendering Freedom
By keeping the animation engine independent of any rendering logic, React Ensemble lets you choose however you would like to draw your frames.
The animation interfaces generated by React Ensemble calculate plain key-value state objects on every frame of your animation. It's up to you whether you convert this state into plain HTML/CSS, SVGs, Canvas, Konva, or something else entirely!
Alternatives to React Ensemble
As an open source fan and contributor, I believe in choosing the right tool for the job and supporting other awesome projects. If React Ensemble isn't what you need, consider checking out these React animation libraries:
- React Spring: Spring physics-based
- Framer Motion: Production-ready gesture support
- React Motion: Minimalist spring animation
- React Move: Data-driven animations
- Use-Web-Animations: Hook for the Web Animations API
- Have another recommendation? Open a PR!