Trigger lottie file animation on button hover

Ask the community
,
1

I have a lottie file embedded in a ‘custom embed’ HTML element.

The code inside the element is:

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

<div
    onmouseenter="player.play()"
    onmouseleave="player.stop()">
    <lottie-player id="player" src="...lottiefilesource.json" 		   speed="1" loop>
    </lottie-player>
</div>

With this, the lottie image plays when the mouse is over the image.

My question: Is it possible to have a button (located elsewhere on the page) trigger the lottie file animation when hovered?

2

Anyone?

3

Hello. The way to communicate between your page code and the HTML component is to use post message.

See the documentation on postMessage