Why is there an import error when importing a lottie file with embedded audio into Webflow, even though JSON files support audio?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

When importing a Lottie file with embedded audio into Webflow, you might encounter an import error, even though JSON files do support audio. This issue arises because Webflow's Lottie integration doesn't currently support audio playback within the editor or on published sites. As a result, any Lottie files with audio embedded in them will not import successfully.

To overcome this limitation and import Lottie files without any errors, follow these steps:

Remove the audio from the Lottie file: Before importing the Lottie file into Webflow, you should strip out any audio elements embedded in the animation. There are various tools available, such as Adobe After Effects or online Lottie editors, that can help you remove the audio.
Export the Lottie file as a JSON without audio: After removing the audio, export the Lottie file as a JSON file. Make sure that the exported JSON file doesn't contain any reference to audio.
Import the modified Lottie file into Webflow: Go to your Webflow project, enter the Designer, and select the page or element where you want to use the Lottie animation. Then, drag and drop the modified JSON file onto the canvas or use the Lottie File component to import the file.
Verify the animation: Once imported, preview the animation in the Webflow Designer or use the Preview mode to ensure that it plays correctly without any audio-related issues.

By following these steps, you can successfully import a Lottie file into Webflow, even if it originally contained audio elements. Remember that while you won't have audio playback within Webflow itself, you can still add audio separately to your site through custom code or integrations with external services.

Additional Questions:

Can I add audio to a Lottie animation on my Webflow site?
What are some alternative methods to include audio in a Webflow project?
Is there a workaround to play a Lottie file with embedded audio on a Webflow site?

Is there a simple way to export all URLs from my Webflow site into a CSV or spreadsheet format?

Does Webflow provide a CSS & Javascript CDN path that can be incorporated into the head of a website?

Can the Search button in the search bar be removed in Webflow while still having the input field search when clicking enter?

Can Webflow be used to set up an application-based website where applications are sent to specific companies without relying on third-party apps like Zapier?

What can be done to prevent the loss of bullet point style when transferring richtext from Airtable to Webflow through Zapier?

Has anyone encountered the issue of receiving a message saying "This Stripe Account is already attached to another Site" when trying to connect their Stripe account on Webflow?

Does Webflow still support redirecting to external URLs? How can I fix broken redirects in Webflow?

Has anyone had success using Salesforce's Web-To-Lead path via Webflow's native form action to transfer form submission data to Salesforce without using a complex web of Make/Zapier operations?

What are some features that differentiate Whalesync from other automation tools for syncing Airtable data to Webflow CMS?

Does the Airtable → Zap → Webflow CMS integration support multiple select columns?