Animation is all about how properties change over time. Let's start with a simple example, let's say we want to create a fade in animation.
If we want to fade the text in over 20 frames, we need to gradually change the
opacity style over time so that it goes from 0 to 1.
interpolate function can make animations more readable.
The function takes 4 arguments:
- The input value
- The range values which the input can assume
- The range of values that you want to map the input to
- Optional settings
In this example, we map the frames 0 to 20 to their opacity values
(0, 0.05, 0.1, 0.15 ...) and use the
extrapolateRight setting to clamp the output so that it never becomes bigger than 1.
Spring animations are beautiful way to put things into motion and make them natural. Remotion includes a helper function to make spring animations easy! This time, let's animate the scale of the text.
You should see the text 'jump in'. The default spring configuration leads to a little bit of overshoot, meaning the text will bounce a little bit. See the reference page about the
spring function to learn how to customize your spring animations.
Always animate using
Watch out for flickering issues during rendering that arise if you write animations that are not driven by
useCurrentFrame() - for example CSS transitions.
Read more about how Remotion's rendering works - understanding it will help you avoid issues down the road.