How to Use Bodymovin with After Effects

If you're working with animations in After Effects and looking for a way to export them as web-friendly formats (like SVG or JSON), Bodymovin is the plugin you need. It's widely used by motion designers and web developers to export After Effects animations for use on websites, apps, or other digital platforms. In this guide, we’ll walk through how to use Bodymovin with After Effects, step by step.

What is Bodymovin?

Bodymovin is a popular After Effects plugin that exports your animations into Lottie, a lightweight JSON-based animation format. Lottie files can be easily used on websites and mobile apps because they maintain the quality of your animations while drastically reducing file sizes compared to GIFs or videos.

Lottie files are particularly powerful for developers as they allow interactive, scalable animations without heavy load times, making them ideal for dynamic web and mobile experiences.

Why Use Bodymovin?

1. Lightweight Animations: Lottie files are much smaller than traditional GIFs or video animations, helping to improve load times.
2. High Quality: Your animations retain their vector quality and scale seamlessly across different screen sizes and devices.
3. Cross-Platform Compatibility: Export animations to use on websites, iOS, and Android apps.
4. Interactive Animations: Developers can control Lottie animations with JavaScript, allowing for clickable, interactive animations on websites.

How to Use Bodymovin with After Effects

Step 1: Install Bodymovin Plugin

The first thing you'll need is the Bodymovin plugin installed in After Effects. Here's how:

1. Open After Effects.
2. Navigate to Window > Extensions > Manage Plugins.
3. Search for Bodymovin or download it from the Adobe Exchange or the Bodymovin GitHub.
4. Follow the installation instructions.

After installation, you’ll find the Bodymovin extension under Window > Extensions > Bodymovin in After Effects.

Step 2: Design Your Animation in After Effects

Once you’ve installed Bodymovin, the next step is to create your animation. Keep these tips in mind:

• Avoid 3D elements: Bodymovin does not support 3D layers, so stick to 2D animations.
• Use supported effects: Some After Effects features may not export properly with Bodymovin. Stick to basic shape layers, solids, masks, and text.
• Pre-compose carefully: While pre-composing is often useful, overly complex compositions may not translate well to Lottie files.

Step 3: Export Your Animation

Now that your animation is ready, you can export it using Bodymovin:

1. Open the Bodymovin extension in After Effects by navigating to Window > Extensions > Bodymovin.
2. In the Bodymovin panel, click Destination to choose where to save the exported Lottie file (JSON format).
3. Select the composition you want to export by clicking the checkbox next to it.
4. Click the Render button.

Bodymovin will generate a Lottie JSON file in the location you chose. This file contains your animation, which is ready for web or mobile use.

Step 4: Implement Lottie Animations on Web or Mobile

Once you have the Lottie JSON file, you can implement it into your web or mobile projects. To do this:

1. For Websites: Use the Lottie Web player. Include the Lottie.js file in your website, and then load the animation using a few lines of JavaScript.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>

<script>

    var animation = lottie.loadAnimation({

        container: document.getElementById('animation-container'), 

        path: 'your-animation-file.json',

        renderer: 'svg', 

        loop: true, 

        autoplay: true, 

    });

</script>

 

1. For Mobile Apps: Use the Lottie library for iOS or Android. You can integrate the Lottie JSON file directly into your app using the official Lottie libraries available for both platforms.

Step 5: Fine-Tune Your Animation

Bodymovin offers some extra features and customization options. Here’s how to make the most of them:

1. Loop Animations: In the Bodymovin export settings, you can set your animation to loop indefinitely. This is useful for continuous loading animations or background effects.
2. Interactive Animations: Lottie animations can be made interactive using JavaScript, allowing you to trigger animations based on user actions such as clicks, scrolls, or hovers.
3. Optimize Performance: Lottie files are lightweight, but if you find that your animation is still slow to load, try simplifying the artwork or reducing the number of keyframes.

Troubleshooting Common Issues

Some animations aren’t working properly: Double-check that you're not using unsupported features like 3D layers or complex effects that Bodymovin doesn't support.

Lottie file is too large: Try optimizing your After Effects project by simplifying layers and keyframes or reducing the resolution of images used in the animation.

Animation looks distorted: This could be due to unsupported features in Bodymovin. Try simplifying your layers, avoiding complex effects, and sticking to basic vector-based animations.

Best Practices for Using Bodymovin

• Stick to vector-based designs: Lottie works best with vector-based elements. Try to avoid raster images where possible.
• Test frequently: Always test your animations across multiple platforms (web, mobile) to ensure they render correctly.
• Keep it simple: Avoid unnecessary complexity in your After Effects compositions, as not all features are supported by Bodymovin.

Conclusion

Using Bodymovin with After Effects opens up endless possibilities for creating lightweight, interactive, and scalable animations that work beautifully across web and mobile platforms. By following the steps in this guide, you’ll be able to export your After Effects compositions to JSON format and implement them using the Lottie framework. This method is ideal for enhancing user experience and improving website and app performance with engaging animations.