Back to DigiBlocks

Lottie Animations Not Playing

The Lottie Animation block in DigiBlocks allows you to add beautiful, lightweight animations to your WordPress site. If your Lottie animations aren’t playing properly, this guide will help you identify and resolve common issues.

Check Animation File Format

Ensure your animation file is in the correct format. The Lottie block supports JSON files exported from Adobe After Effects using the Bodymovin plugin.

Supported formats:

  • .json files exported from After Effects with Bodymovin
  • Files should contain valid JSON data structure

Unsupported formats:

  • .lottie files (compressed format)
  • .gif or other image formats
  • Video files

Verify File Upload and URL

Check that your Lottie file has been properly uploaded to your WordPress media library or is accessible via external URL.

For uploaded files:

  1. Go to Media Library in WordPress admin
  2. Locate your Lottie JSON file
  3. Click on the file to view its details
  4. Copy the file URL and test it directly in your browser

For external URLs:

  • Ensure the URL is publicly accessible
  • Check that the file isn’t blocked by CORS policies
  • Verify the URL returns valid JSON content

Validate JSON Structure

Invalid JSON structure is a common cause of animation failures. Test your Lottie file using online validators.

Quick validation steps:

  1. Open your .json file in a text editor
  2. Check for syntax errors (missing commas, brackets, quotes)
  3. Use an online JSON validator to verify structure
  4. Re-export from After Effects if errors are found

Check Browser Console for Errors

Open your browser’s developer console to identify JavaScript errors that might prevent animations from loading.

To check console errors:

  1. Right-click on your page and select “Inspect Element”
  2. Go to the “Console” tab
  3. Refresh the page and look for error messages
  4. Look specifically for errors mentioning “lottie” or animation-related issues

Verify Lottie Script Loading

Ensure the Lottie JavaScript library is properly loaded on pages containing Lottie blocks.

The DigiBlocks plugin automatically loads the Lottie script when a Lottie block is detected on a page. If animations aren’t working, check that:

  • The Lottie block is properly inserted in your content
  • No caching issues are preventing script updates
  • No JavaScript errors are blocking script execution

Animation File Size Considerations

Large animation files can cause performance issues or loading failures.

Optimization tips:

  • Keep JSON files under 1MB when possible
  • Reduce animation complexity if file size is too large
  • Consider breaking complex animations into smaller segments
  • Optimize images and vectors within the animation

Block Settings Configuration

Review your Lottie block settings to ensure proper configuration.

Key settings to check:

  • Animation URL: Verify the correct file URL is entered
  • Autoplay: Enable if you want animations to start automatically
  • Loop: Configure whether animations should repeat
  • Speed: Adjust playback speed if needed
  • Trigger: Set appropriate trigger conditions (on load, on scroll, etc.)

Clear Caching

Caching plugins or server-side caching might serve outdated versions of your pages without the necessary Lottie scripts.

Clear these caches:

  • WordPress caching plugins (W3 Total Cache, WP Rocket, etc.)
  • Server-side caching (if applicable)
  • Browser cache (Ctrl+F5 or Cmd+Shift+R)
  • CDN cache (if using a CDN service)

Theme and Plugin Conflicts

Other plugins or theme code might interfere with Lottie animation functionality.

To test for conflicts:

  1. Temporarily switch to a default WordPress theme (Twenty Twenty-Three)
  2. Deactivate other plugins except DigiBlocks
  3. Test if animations work correctly
  4. If they work, reactivate plugins one by one to identify conflicts

Browser Compatibility

While Lottie animations work in modern browsers, older browsers might have compatibility issues.

Check browser support:

  • Test in different browsers (Chrome, Firefox, Safari, Edge)
  • Ensure browsers are updated to recent versions
  • Consider fallback options for older browser users

Server Configuration Issues

Some server configurations might block or interfere with JSON file delivery.

Potential server issues:

  • MIME type not properly configured for JSON files
  • Security plugins blocking JSON file access
  • Server compression interfering with file delivery
  • Firewall rules blocking animation resources

Network and Performance Issues

Slow network connections or performance issues can prevent animations from loading properly.

Performance considerations:

  • Test on different network speeds
  • Check server response times for animation files
  • Monitor page load performance
  • Consider lazy loading for animations below the fold

Re-export Animation

If other solutions don’t work, try re-exporting your animation from After Effects.

Re-export steps:

  1. Open your original After Effects project
  2. Ensure all layers and assets are properly linked
  3. Use the latest version of the Bodymovin plugin
  4. Export with standard Lottie settings
  5. Test the new file before uploading

Advanced Debugging

For persistent issues, enable WordPress debugging to get more detailed error information.

Add these lines to your wp-config.php file:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Check the /wp-content/debug.log file for any DigiBlocks or Lottie-related errors.

Contact Support

If you’ve tried all troubleshooting steps and animations still aren’t playing, gather the following information before contacting support:

  • WordPress version
  • DigiBlocks plugin version
  • Active theme name
  • Browser console errors
  • Sample Lottie JSON file (if possible)
  • Screenshots of block settings
  • Steps to reproduce the issue

This information will help support teams quickly identify and resolve the issue.

Similar Articles

Back to DigiBlocks