Skip to main content

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.

CSS animations

You can synchronize animations with Remotions time using the animation-play-state and animation-delay CSS properties. Check out example code or use the remotion-animation library directly (unofficial library).

GIFs

Use the @remotion/gif package.

Framer Motion

At the moment, we don't have a Framer Motion integration, but are discussing the matter on GitHub Issues.

Anime.JS

See this repository for an example.

Lottie

Use the @remotion/lottie package.

Rive

Use the @remotion/rive package.

After Effects

See: Lottie - Import from After Effects

Three.JS

Use the @remotion/three 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.

TailwindCSS

See: TailwindCSS

GreenSock

See: How to integrate GreenSock with Remotion

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.