Fixing Missing SVG Elements in Elementor Lottie Animations
I recently ran into an issue with the Elementor Lottie Widget where parts of my SVG animations weren't rendering. The animation would play, but certain paths or elements were completely missing.
After some investigation, I found the root cause:
Elementor is loading an outdated version of lottie-web.
Newer Lottie exports—especially SVG-based animations from After Effects—can rely on features that older versions of lottie-web don't support. When that happens, Elementor doesn't throw an error; it simply drops parts of the animation.
The Fix: Force Elementor to Use the Latest Lottie Version
Elementor registers lottie-web under the script handle lottie, which makes it possible to safely override.
I fixed the issue by deregistering Elementor's bundled version and loading the latest one instead:
function dcoded_update_lottie_version() {
// Elementor registers lottie-web under this handle
wp_deregister_script('lottie');
// Load latest lottie-web
wp_register_script(
'lottie',
'https://unpkg.com/[email protected]/build/player/lottie.min.js',
[],
'5.13.0',
true
);
wp_enqueue_script('lottie');
}
add_action('wp_enqueue_scripts', 'dcoded_update_lottie_version', 20);
Where to Add This
You can add this snippet in one of two ways:
- Directly in your theme's
functions.php - Via a snippet plugin like WPCode (recommended)
If you're using WPCode, add this as a PHP Snippet and set it to run site-wide on the front end, so Elementor's Lottie widget uses the updated library everywhere.
Using a snippet plugin keeps this fix independent of your theme and makes it easy to disable if Elementor updates their bundled version in the future.
Results
Once this was in place:
- All missing SVG elements rendered correctly
- Existing Lottie animations continued working
- No animation re-exports were required
Final Thoughts
Elementor doesn't currently provide a way to control the version of lottie-web it uses. If your Lottie animation looks partially broken or incomplete, this is a good thing to check before rebuilding portions of your animation.