Trigger animation on hover with Lottie and wordpress

Question

i am currently building a website in wordpress (with elementor) that needs animation on it. I want to use Lottie to do this since i love the possibilities of it, but i can only get Lottie to work with the plugin WP Bodymovin by taking the shortcode and putting it inside a "HTML code" block in elementor. But i want the animation to be triggered on mouse over which seems to be possible with this plugin "Animentor – Lottie & Bodymovin widget for Elementor". But when i upload my .JSON file through the "Animentor" widget in elementor, nothing shows up. Hoping anyone has some direction for how to work with this since i already tested on different computers and different browsers and made sure the plugin is compatible with newest version of elementor. Thanks for your time.

Had no idea this existed - interesting. Anyway, it looks like you're not supposed to need WP Bodymovin if you're using this widget. Possibly they're conflicting. You might want to check your console for errors and page source for the code. — CK MacLeod, Apr 07 '20 at 00:22
Hmmm, looking further into the problem i found an error message in the console which seems to block it. This is the error code i get "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." — Bananders, Apr 07 '20 at 15:20
That can cause problems, for sure. I've not used the plugin, so I don't know how it's set up - loading Lottie files externally? CORS policy errors often come into play in relation to cache and/or CDN settings. — CK MacLeod, Apr 07 '20 at 15:35
Its loading Lottie files from the wordpress media library - but it gets rejected. I will update i find a way around. — Bananders, Apr 07 '20 at 17:31

score 0 · Answer 1 · answered Apr 07 '20 at 18:59

Animentor uses the WordPress Media Library to manage the .json files you’ve uploaded, so they should have been loading from the same domain.

As @CK MacLeod correctly pointed out, a CORS error usually indicates an issue with caching and/or your CDN.

You could try temporarily disabling any caching or CDN plugins you might have installed, so you can identify which one causes the issue.

Alternatively, you could also try setting the Access-Control-Allow-Origin header in your .htaccess file:

<FilesMatch ".json">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

If you think this is an issue with Animentor, plese open an issue on its GitHub repository.

^{Disclaimer: I’m the developer of “Animentor – Lottie & Bodymovin widget for Elementor”.}

Trigger animation on hover with Lottie and wordpress

1 Answers1