Third party integrations
All animations in Remotion must be driven by the value returned by the useCurrentFrame()
hook. If you would like to use another way of animations in Remotion, you need an integration that supports synchronizing the timing with Remotion.
On this page, we maintain a list of integrations for popular ways of animating on the web, and provide status for popular requests.
After Effects
See: Lottie - Import from After Effects
Anime.JS
See this repository for an example.
CSS animations
You can synchronize animations with Remotions time using the animation-play-state
and animation-delay
CSS properties.
See an example here.
Framer Motion
At the moment, we don't have a Framer Motion integration, but are discussing the matter on GitHub Issues.
GIFs
Use the @remotion/gif
package.
GreenSock
See: How to integrate GreenSock with Remotion
Lottie
Use the @remotion/lottie
package.
React Native Skia
Use the @remotion/skia
package.
react-spring
There is no direct compatibility but Remotion provides it's own spring()
instead.
Reanimated
There is no integration available but Remotion shares some code with Reanimated, in particular interpolate()
, spring()
and Easing
. This makes it easier to refactor already existing animation from Reanimated.
Rive
Use the @remotion/rive
package.
TailwindCSS
See: TailwindCSS
Three.JS
Use the @remotion/three
package.
Other libraries
Are you interested in using other libraries with Remotion? You can file a GitHub issue to inquire it. While we cannot guarantee to help, you can register interest and kick off the discussion.