(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Required for Lottie and Global Code –
1 – Elementor Pro
OR
If you’re using free version, Install a Lottie Plugin so that it allows uploading of json file & Install WPcode snippet plugin to insert the code globally.
Recommended to get Elementor Pro as it removes the need to install 2 extra plugins.
CSS and JAVASCRIPT (JS) code to run Lottie Animation on Mouse Click
- In #lottie_container, change the width & height to your desired size of Lottie animation. Remember that resolution of Lottie file should be equal or bigger to the size set in above container so that it fills up the container.
- lottieContainer.style.top = (y – 100) + ‘px’; & lottieContainer.style.left = (x – 100) + ‘px’; – Here make sure the value is set to half the size of width and height set in #lottie_container. Example: if height and width are 300px, then instead of -100, type half of 300px i.e 150. This makes the animation centered to mouse position.
- path: ‘#ADDjsonURL’ – Replace #ADDjsonURL with the URL of your lottie json path
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>
<style>
#lottie_container {
position: absolute;
width: 200px; /*Change Width of the container*/
height: 200px; /*Change Height of the Container*/
pointer-events: none;
z-index: 99999;
}
</style>
<script>
document.onclick = function(e){
let x = e.pageX;
let y = e.pageY;
// Create a container for the Lottie animation
const lottieContainer = document.createElement('div');
lottieContainer.id = 'lottie_container';
lottieContainer.style.top = (y - 100) + 'px'; // Make -100 to half of the #lottie_container height
lottieContainer.style.left = (x - 100) + 'px'; // Make -100 to half of the #lottie_container width
document.body.appendChild(lottieContainer);
// Load the Lottie animation
const animationData = {
container: lottieContainer,
renderer: 'svg',
loop: false,
autoplay: true,
path: '#ADDjsonURL'//Add your lottie file Path URL
};
const anim = lottie.loadAnimation(animationData);
// Remove the container when the animation is complete
anim.addEventListener('complete', function() {
lottieContainer.remove();
});
}
</script>
