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();

})

(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()
});


        
        Lorem ipsum


        
        Lorem ipsum

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

user_13134756 · Answer

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:

then declare your element:

user_2033291 · Answer

So after getting very useful answers here and in other questions, the correct way to do this:

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

$(".vc_col-sm-3").on('mouseover', function(event) {
  $(this).find(lottiePlayer)[0].play();

});

Lottie animations and hovers: simpler way?

2 Answers