Lottie animations and hovers: simpler way?

Question

I am new to coding, and trying to learn as much as i can while working on real projects.

I have 8 divs, and each div has it's individual lottie animation (each animation has its .json file). I want to play the respective div's animation on hover.

so my html looks like this

var containerHorloge = document.getElementById("anim-horloge");
var containerBalance = document.getElementById("anim-balance");
var containerOrdi = document.getElementById("anim-ordi");
var containerFamille = document.getElementById("anim-famille");
var containerLunettes = document.getElementById("anim-lunettes");
var containerBonhomme = document.getElementById("anim-bonhomme");
var containerCoupes = document.getElementById("anim-coupes");
var containerPinpoint = document.getElementById("anim-pinpoint");

var animHorloge = bodymovin.loadAnimation({
    container:  containerHorloge,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-horloge.json'

});
var animBalance = bodymovin.loadAnimation({
    container:  containerBalance,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-balance.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerOrdi,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-ordi.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerFamille,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-famille.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerLunettes,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-lunettes.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerBonhomme,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-bonhomme.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerCoupes,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-coupes.json'
});
var animation = bodymovin.loadAnimation({
    container:  containerPinpoint,
    renderer: 'svg',
    autoplay: false,
    loop: true,
    path : '/wp-content/uploads/svg/anim-pinpoint.json'
});


$(".section-cases .vc_col-sm-3.div-horloge").on('mouseenter', function(event) {
    event.preventDefault();
    onEnter:animHorloge.play();

})

<div class="vc_col-sm-3 div-horloge"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>

(For the example, i just gave one div a specific class, but every div would have it's own specific class.. maybe. lol) Now i know i could just call each animation on each div separately, but i'm trying to figure out if there's a cleaner / shorter way to do this? A loop? I thought of a forEach loop, but i don't even know how i would associate each animation with each div. Maybe arrays ?

Again, i am fairly new to coding, and know some basics, but not much of loop, arrays, etc..

Thanks a lot!

EDIT

So this is how i got it to work (thanks to @sam-osb's answer)

var lottiePlayer = document.getElementsByTagName("lottie-player");

$(lottiePlayer).on('mouseenter', function(event) {
    console.log(this);
    this.setDirection(1)
    this.play()

}).on('mouseleave', function(event) {
    this.setDirection(-1)
    this.play()
});

<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>
<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>

The problem is that i want to hover on the PARENT (.box div...)

So i've tried:

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    $(this).find(lottiePlayer).play();

})

// or

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    this.find(lottiePlayer).play();

})

// or even 

$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
    lottiePlayer.play();

})

// and then

$(".box")on('mouseenter', function(event) {
  this.find(lottiePlayer).play();
 

})

And it always returns that .play() is not a function...

i know i'm doing something stupidly wrong, but don't know what LOL

Answer 1

You can use this library with the 'hover' attribute to play animations on hover, and let it load the animations for you so you could remove all the bodymovin calls:

https://github.com/LottieFiles/lottie-player

Just include the CDN in the head of your HTML file:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

then declare your element:

<lottie-player src="URL" hover></lottie-player>