Chapter 389: Import from After Effects

Core Idea

If you are a After Effects user, you might find it useful to convert your After Effects compositions to Remotion compositions. You can use the @remotion/lottie package for this.

Key Concepts

• Install the Bodymovin plugin
• Create a composition
• Create your animation
• Allow export as JSON
• Open the Bodymovin plugin
• Export the animation as JSON
• Import the file into Remotion
• Finetuning

Code Examples

const Balloons = () => {
  const [handle] = useState(() => delayRender('Loading Lottie animation'));

  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);

  useEffect(() => {
    fetch(staticFile('animation.json'))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
        console.log('Animation failed to load', err);
      });
  }, [handle]);

  if (!animationData) {
    return null;
  }

  return <Lottie animationData={animationData} />;
};

• What it demonstrates: Usage pattern for Import from After Effects from the official docs.

Key Takeaways

1. Understand install the bodymovin plugin when working with Import from After Effects.
2. Understand create a composition when working with Import from After Effects.
3. Understand create your animation when working with Import from After Effects.
4. Understand allow export as json when working with Import from After Effects.
5. Understand open the bodymovin plugin when working with Import from After Effects.

Connects To

• Accessibility: related page in the Legal, Meta & Support section.
• dev: related page in the Legal, Meta & Support section.
• pro: related page in the Legal, Meta & Support section.