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?

TL;DR
  • Use the Bodymovin Lottie plugin in After Effects to export your animation as a .json file, ensuring all elements like text and stroke effects are included.
  • Upload the .json file to Webflow, embed it using a Lottie element, and adjust playback settings as needed; then test the animation on your Webflow page to make sure it runs correctly.

To upload an After Effects animation to your Webflow site with all elements intact, including text and stroke write-on effects, you can use the Bodymovin Lottie plugin. Here's how to do it:

​

1. Export Animation Using Bodymovin

  • Open After Effects and make sure your animation is complete.
  • Go to Window > Extensions and select Bodymovin.
  • In the Bodymovin panel, set the destination for the exported files and select the composition you want to export.
  • Ensure export settings are configured to include text, stroke effects, and any other relevant assets.
  • Click Render to export and generate a .json file.

​

2. Prepare the Lottie File for Webflow

  • Review the .json file generated by Bodymovin to ensure all elements are included.
  • If assets are missing, recheck your composition in After Effects and ensure all layers are properly supported by Bodymovin.

​

3. Upload Lottie File to Webflow

  • Open Webflow and navigate to your project.
  • Go to the Assets Panel and click Upload to add the .json file.
  • Once uploaded, note the file's URL if needed for embedding.

​

4. Embed Lottie Animation on Your Webflow Page

  • Drag a Lottie element from the Webflow elements panel to where you want the animation.
  • In the Lottie element settings, select the uploaded .json file from the dropdown.
  • Adjust animation playback settings such as loop, speed, and start/stop triggers as needed.

​

5. Test and Adjust

  • Preview your Webflow page to ensure the animation displays correctly.
  • Confirm all text and stroke effects play as intended.
  • Make necessary adjustments in After Effects and re-export if issues are found.

​

Summary

By exporting using Bodymovin and properly uploading and embedding it in Webflow, you can ensure your After Effects animation with all elements, including text and stroke effects, appears correctly. Always verify your animations in Webflow after embedding to catch and resolve any issues.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I link to the previous or next CMS item in Webflow, such as in a collection of blog posts, based on date or other data?
Is it possible to have a load animation only display for the user's first visit to the home page in Webflow, without being shown on subsequent visits?
How do I set up a CMS Template page in Webflow to look like this figma image?
Can I create a form in Webflow that submits and creates new CMS items, without using any third-party integrations or tools?
How can I customize the error and success messages that appear after clicking on a form button in Webflow?
How can I fix the canonicalization error with Webflow's Glossary page when using Finsweet attributes Library for filtering and loading the CMS?
How can I fix the issue where the slideshow on my Webflow website's homepage is not showing up in the published version, but is visible in design mode?
How can I create a multi-image slider from CMS in Webflow, similar to the Atelier template, where the images scroll to the right instead of having just one image sliding over itself? You can view my current implementation on my site Read-Only.
How can I hide the contact section and headers in design view in Webflow?
How can I clear the server cache in Webflow after migrating my site?
How can I install a countdown timer widget on my Webflow site?
Why is Webflow Designer running slow in Design Mode but not in Preview Mode, even after a system restart?
How can I add cookies to custom modals in Webflow?
How can I add a date and time picker to a simple Webflow form without using a CMS collection item?
How can I make the sign-up form modal in Webflow's homepage only appear once, either after initial load or after the user has signed up or closed out, and how and where can I insert the code to set a cookie?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?