Skip to main content

Remotion 2.1

· 3 min read
Jonny Burger

import { PlayerExampleWithControls } from "../components/PlayerExampleWithControls.tsx";

This releases features new utility functions, improved developer experience and an experimental release of the Remotion Player!

New interpolateColors() function 🌈​

Now you can easily animate between colors and mix colors to create interesting animations using interpolateColors().

I personally used it to recreate Apple's 'Spring Loaded' logo in Remotion using only <div> elements.

Thanks for Shankhadeep Dey for implementing this feature!

New measureSpring() function 🌀​

One problem when using a spring animation for transitions is that you don't know the duration of the animation. This is why we added a new measureSpring() function!

Now you can adjust your timings in Remotion dynamically when changing spring configurations.

Thanks to Samuel Rodriguez-Lozano for implementing this feature!

Documentation and developer experience updates​

We invested time in making sure that if something goes wrong, you don't get stuck. Here are some things we did to improve your experience with Remotion:

  • If you encounter a timeout, you will now see a stacktrace of where the delayRender() handle was not cleared. We also now have a troubleshooting page for timeouts and link to the documentation if you encounter the error.
  • If you use Chromium and import an MP4 video, you get a more helpful error and we link to a help page.
  • We added a guide for improving performance while development and while rendering.
  • The server-side rendering APIs bundle(), getCompositions(), renderFrames() and stitchFramesToVideo() with all their parameters are now more properly documented.
  • If an exception is thrown while rendering, the log output in the console is now better.

Alpha release of @remotion/player​

We are working on a Remotion player component that you can import into your React app. Today we are prereleasing the player for those who wish to experiment and provide us with feedback. Let us know what you think!

Read the documentation for @remotion/player

Test coverage updates​

We now have over 450 tests, and the Remotion core has a test coverage of over 80% now. Thanks to Tobias Boner, Calvin Falter and Jonas Brunner for continuining their massive testign initiative!

We now also test across different node versions (12, 14 and 16), npm versions (v6 and v7) and FFMPEG versions (4.1 and 4.4) in addition to testing on 3 different operating systems so we can confidently release new features quickly.

For contributors, we now have a TESTING.md file.

Miscellaneous​

  • You can now press Shift+Right Arrow to jump 1 second forward in the timeline and Shift+Left Arrow to jump 1 second back.
  • npm init video will now setup a Remotion project with NPM, yarn create video will setup a project with Yarn.
  • Node 16 and NPM 7 is now better supported, no warnings will be shown during installation and execution.
  • Fixed several audio rendering issues: [#292](https://github.com/remotion-dev/remotion/issues/292 #293 #320
  • When the update banner appears in the editor, you can now click to copy the command.
  • You can now pass a React ref to <Audio/> and <Video /> tags.
  • We revamped the CLI output! How do you like it?
  • The preview size option in the editor is now persisted, thanks Oluwatobiju Judah!
  • In the editor, the transparency toggle is now enabled by default.