Can Lottie files with PNG images be uploaded to Webflow?

Published on
September 22, 2023

Yes, Lottie files with PNG images can be uploaded to Webflow. Lottie is a library by Airbnb that allows designers to export animations from After Effects as JSON files, which can then be uploaded and used in Webflow. Lottie files have support for various types of animations, including those that include PNG images.

To upload a Lottie file with PNG images to Webflow, you can follow these steps:

  1. Prepare your Lottie file with the PNG images in After Effects or another supported animation software.
  2. Export the animation as a JSON file using the Lottie plugin or exporter tool.
  3. In your Webflow project, navigate to the Designer.
  4. Drag and drop an Embed element onto your canvas in the desired location.
  5. In the Embed element settings, click on the "Settings" gear icon.
  6. Choose the "Lottie" option from the "Integration" tab.
  7. Upload the JSON file that includes the PNG images.
  8. Adjust the dimensions and settings of the Lottie animation as needed.

By following these steps, you can easily upload and use Lottie files with PNG images in your Webflow project. This allows you to create engaging animations that enhance the user experience on your website.

Additional Questions:

  1. How can I export a Lottie file with PNG images from After Effects?
  2. Can I use Lottie files with SVG images in Webflow?
  3. What other file formats are supported for animations in Webflow?