Custom CSS animations in React
Dynamically generated CSS3 animations in React
Sadly it can not be achieved in a purely declarative way unlike the simpler functions. Fortunately there are multiple solutions, ones that can be done with the React framework.
At least two different approaches exist. The first one uses some kind of a timer to periodically update the animated element (most likely using requestAnimationFrame). This is a less hacky and precise solution. The main drawback is that the calculate function has to be called for every frame as long as the animation is running; it makes it infeasible in situations where the calculation is a resource intensive task.
The other train of thought is to calculate the animation beforehand, then generate CSS3 animation keyframes. This is a more hacky solution, but has the advantage that the path has to be calculated only once per change. The drawback is that it is not precise, as there are only so many keyframes. This is a performance - precision trade-off, however it generally yields good results. The users are not likely to spot the misplaced frames if you interpolate linearly between 100 calculated points.
In this post I’ll demonstrate the latter technique with a simple code.
Code is available here.
This demonstration centers on an animated element accepting functions for both X and Y translations. These two timing functions map the 0 - 1 interval to the same 0 - 1 interval; they control how much translations should be applied for a given juncture.
Generate the style tag
The first thing is to generate the style tag and handle it’s removal when the component itself is removed. We also need to salt the class names with a random value, in order to support multiple instances.
Generating the contents is the next step. We now need to decide on the precision, as the number of keyframes is specified here.
The animation will be less precise if you use fewer keyframes. It can reach to a point where it is becoming increasingly noticeable. For example the above animation will look more of a diamond than a circle when you use only ten keyframes:
Lastly, we need to insert and store the tag, along with the random nonce.
Using the animation specified above requires a simple style attribute:
It is important that you set the interpolation to linear, as it defaults to ease. Failing to override it would seriously mess up the animation.
We also need to take care of the cleanup:
Update the style
We need to tap into the lifecycle at the componentDidMount and the componentDidUpdate events.
At the updateAnimation method we can iterate on and update the keyframes based on the current results of the animation functions.
Note, that modifying the keyframes this way won’t change the DOM, so it will be invisible in the source. It makes debugging a bit harder.
The main drawback of this solution is that the keyframes are updated for every update of the component. This can be mitigated somewhat by adding a comparison to the componentDidUpdate callback, to check for referential equality. But for most cases, this won’t help much as the function is constructed dynamically, making a different instance every time.
Functions are next to impossible to compare due to the closures they have access to, but you can add a hash to them. This should be affected by all the parameters the function uses, and must be kept in sync.