WPDD

WordPress Develop & Design

lottie play on hover

Query lottie. How to play lotties html elements.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<div class="icon lottie-wrap ani hover active" data-lottiesrc="https://domain.co.il/wp-content/uploads/2024/07/streamline-1.json"><lottie-player class="lottie" src="https://domain.co.il/wp-content/uploads/2024/07/streamline-1.json" background="transparent" speed="1"></lottie-player></div>
<div class="icon lottie-wrap ani hover active" data-lottiesrc="https://domain.co.il/wp-content/uploads/2024/07/proactive-1.json"><lottie-player class="lottie" src="https://domain.co.il/wp-content/uploads/2024/07/proactive-1.json" background="transparent" speed="1"></lottie-player></div>

<script>
jQuery(window).load(function() {
// Function to initialize Lottie animations
if ( jQuery( window ).width() > 767 ){
    jQuery('.lottie-wrap.hover').hover(
        function() {
            var lottiePlayer = jQuery(this).find('lottie-player')[0];
            lottiePlayer.play();
        },
        function() {
            var lottiePlayer = jQuery(this).find('lottie-player')[0];
            lottiePlayer.stop();
        }
    );

    // Play animation on click (optional)
    jQuery('.lottie-wrap.hover').click(function() {
        var lottiePlayer = jQuery(this).find('lottie-player')[0];
        lottiePlayer.play();
    });
}
});
</script>