How can I upload an After Effects animation to my Webflow site so that the entire animation appears correctly with all elements, including text and stroke write-on effects, using Bodymovin?

To integrate an After Effects animation on your Webflow site using Bodymovin, follow these steps to ensure all elements, including text and stroke write-on effects, appear correctly.

​

1. Install the Bodymovin Plugin

• Go to the Adobe Exchange or directly search for Bodymovin in the After Effects Plugins section.
• Download and install the plugin in After Effects.

​

2. Prepare Your Animation

• Open your After Effects project and ensure all elements including text and stroke write-on effects are finalized.
• Ensure all fonts used are supported by Bodymovin and convert them to outlines, if needed.
• Pre-compose the layers if necessary to tidy up your layers and simplify the export process.

​

3. Export with Bodymovin

• In After Effects, go to Window > Extensions > Bodymovin to open the plugin interface.
• Select the composition you wish to export.
• Click on Settings (gear icon) next to your selected composition.
• Enable glyphs to export text as shapes instead of fonts.
• If necessary, adjust other export settings to ensure all effects are supported.
• Click Export to save your animation as a JSON file.

​

4. Upload JSON File to Webflow

• Go to your Webflow project dashboard and open the desired project.
• Navigate to the Designer and open the Assets Panel.
• Upload the exported JSON file into your assets.

​

5. Implement Animation in Webflow

• Drag an Embed Element from the Add panel into your Webflow design canvas where you want the animation.
• Within the Embed element, use the following script structure to call the JSON animation:
• <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js"></script>
• Initialize the animation with Lottie like:

    ```<script>

    var animation = bodymovin.loadAnimation({

      container: document.getElementById('animationContainer'), // the dom element that will contain the animation

      renderer: 'svg',

      loop: true,

      autoplay: true,

      path: 'url-to-your-json-file.json' // the path to the animation json

    });

    </script>```

• Replace 'url-to-your-json-file.json' with the path to your uploaded JSON file in Webflow.

​

Summary

To display an After Effects animation on Webflow using Bodymovin, first, install the Bodymovin plugin, prepare your animation ensuring full compatibility, export it as a JSON file, upload this file to Webflow, and implement it using the Lottie library via an Embed element. This ensures all animation elements, including text and stroke effects, render correctly.