Play Bodymovin animation on parent element hover

Question

I have two cards with an animated icon in them. When I hover over the icon, the animation starts playing. Now I want the icon to animate when the card is hovered, not the icon itself. I already tried out different options, but that didn't work.

That's the code I currently have, which works when the icon itself is hovered:

 <cm-onboarding-selection-card>
       <cm-onboarding-animated-icon data-file="instagram"></cm-onboarding-animated-icon>
 </cm-onboarding-selection-card>

var bm = $("cm-onboarding-animated-icon");

Array.prototype.forEach.call(bm, icon => {

    var anim = bodymovin.loadAnimation({
        container: icon,
        path: `icons/${icon.dataset.file}.json`,
        renderer: 'svg',
        loop: false, 
        autoplay: false

    })

    icon.addEventListener('mouseenter', () => {
                anim.setDirection(1)
                anim.play();
    })

    icon.addEventListener('mouseleave', () => {
                anim.setDirection(-1)
                anim.play();
    })
})