A glance at Remotion
I have recently stumbled upon Remotion, a library to create videos with React and render them on the server. As a passionate web developer and motion designer, I just had to try it.
Remotion is a library for creating videos using React. Since I am a web developer and a motion designer at dreipol, Remotion offers me a great opportunity to combine code and motion.
About Remotion:
Use your React knowledge to create real MP4 videos. Render videos dynamically using server-side rendering and parametrization. Visit www.remotion.dev for more details.
So I checked it out and created this video:
Overall, I find Remotion very intuitively built. You won’t struggle long to get started working on your animation which is very nice.
In the following, I would like to highlight some of the main features that have particularly appealed to me. I have added my own code to some of them.
Interpolate function
The interpolate function lets you animate almost everything as long as it is a number. I thought it would be really great if you could interpolate through different keyframes. So I created my own useKeyframes hook to set multiple keyframes with multiple values per keyframe. This helped me to make the animation faster.
// useKeyframes([[firstKeyframeStart, firstKeyframeEnd], [secondKeyframeStart, secondKeyframeEnd]], [firstKeyValues, secondKeyValues])const [strokeDashoffset] = useKeyframes([[0, 20], [20, 27], [27, 33], [33, 35],],[
[0, -250, {easing: Easing.bezier(0.45, 0, 0.85, 0.77)}],
[-250, -390, {easing: Easing.bezier(0.15, 0.23, 0.64, 0.84)}],
[-390, -410, {easing: Easing.bezier(0.36, 0.16, 0.64, 0.84)}],
[-410, -250, {easing: Easing.bezier(0.36, 0.16, 0.88, 0.71)}],
]);
Easing function
There is a very cool easing function where you can enter all the bezier so your easing is customized. I used cubic-bezier.com to obtain a good visualization.
Further features
The preview player not only looks very appealing but also lets you replay and test your components separately. It lets you work on a specific part of your animation without having to replay the whole video all the time.
You see your component in the timeline and are able to adjust the timing much easier in the code.
For creating the video you simply run the command line npm run build – and that’s it.
You can also easily change the resolution of your video by just adapting the width and height of your composition – and build your video in 4k or even 8k in no time. Unfortunately, though, it then takes some time to render and you won’t be updated about the progress. Thus, you simply have to wait until the video shows up in the folder.
Desires for the future
When I first came across this library, I imagined that I could use the components created with the library in our frontend projects at dreipol too.
This would have allowed me to create components that could be animated and re-used in our applications and projects. At the moment, however, the main focus on the project lies on the server-side rendering of the video. While I understand the possibility for this (automatically render videos that depend on certain parameters), me and my colleagues truly miss the possibility to export the React components to integrate the animation into a website. Of course, there are other tools for this, like react-spring, framer-motion, or react-motion, but it would still be a great feature — especially when the editor/preview becomes more powerful in the future.
For now, you are only able to preview your animation on the web. It would be nice if the preview could also be a kind of editor. For example, if you moved the components in the timeline, it would update it right away in the code.
I look forward to seeing where the development of this library will take us. I see great potential for Remotion, but for now, there aren’t enough features yet for motion designers or developers.
If I had to choose a program to create a video, I would still go with Adobe After Effects (AE). To create path animation I would use AE, Bodymoving and Lottie. If I would do some animation on the web I would prefer pure CSS and the dev tools, react-spring, or some other React animation library.
Yet Remotion is very well done and I for sure will watch closely how it will develop in the future.
