Back to Community

Troubleshooting Guide: Fixing Missing Lottie Animations in Spectra

Content

Many users of the Spectra Gutenberg Blocks plugin report a common and frustrating issue: Lottie animations appear perfectly in the WordPress block editor but are completely missing or show as blank spaces on the live, front-end website. This guide will help you understand why this happens and walk you through the most effective solutions.

Why Do Lottie Animations Disappear on the Front End?

Based on community reports, this problem is rarely caused by a single factor. The most common culprits are:

  • Plugin or Theme Conflicts: Another plugin or your theme might be interfering with how Spectra loads its scripts and styles.
  • Caching Issues: Aggressive caching mechanisms, either in a plugin, your browser, or on your server, might be serving outdated files that don't include the necessary code for the Lottie blocks.
  • Outdated Assets: After updating the Spectra plugin, the internal file that controls how blocks are displayed (the CSS and JS assets) may not have been regenerated, leading to a mismatch between the editor and the front end.
  • Block Duplication: Some users have noted that the problem can occur when duplicating existing Lottie blocks instead of creating new ones from scratch.

Step-by-Step Troubleshooting Solutions

Try these solutions in order. After each step, clear all caches and check your live site to see if the issue is resolved.

1. Update and Regenerate Assets

This is the most common fix suggested for Spectra block issues.

  1. Ensure your Spectra plugin is updated to the latest version.
  2. Navigate to Spectra > Settings > Asset Generation.
  3. Click the Regenerate Assets button. This forces the plugin to rebuild its core files.
  4. Clear any server-level or plugin-based cache you have running (e.g., WP Rocket, W3 Total Cache, LiteSpeed Cache).

2. Clear Your Browser Cache

Your browser might be loading an old, cached version of the page. Perform a "hard reload" while on the editor screen:

  1. On Windows/Linux: Press Ctrl + F5 or Ctrl + Shift + R.
  2. On Mac: Press Cmd + Shift + R.

3. Conflict Test

To rule out conflicts with other plugins or your theme:

  1. Temporarily deactivate all your plugins except Spectra.
  2. Switch to a default WordPress theme like Twenty Twenty-Four.
  3. Check if the Lottie blocks now appear on the front end. If they do, reactivate your plugins and theme one by one, checking after each, to identify the culprit.

4. Recreate the Lottie Block

If the issue is related to block duplication, try deleting the problematic Lottie block and creating a new one from scratch instead of copying an existing one.

When to Consider Next Steps

If you have tried all the steps above and your Lottie animations are still not appearing, the issue could be more specific to your site's configuration. The Spectra Gutenberg Blocks team has historically requested that users with complex, unresolved issues provide a direct link to the affected page for deeper investigation.

Persistent problems with blocks not rendering, as seen in multiple community threads, often require detailed technical review to diagnose fully.

Related Support Threads Support