# Plotly link animation update to independent HTML video

**URL:** <https://community.plotly.com/t/plotly-link-animation-update-to-independent-html-video/68796>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [October 11, 2022, 7:41am UTC](https://community.plotly.com/t/plotly-link-animation-update-to-independent-html-video/68796 "2022-10-11T07:41:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![prehani](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prehani](https://community.plotly.com/u/prehani)\
**Post date:** [October 11, 2022, 7:41am UTC](https://community.plotly.com/t/plotly-link-animation-update-to-independent-html-video/68796/1 "2022-10-11T07:41:39Z")

</div>

Hi all,

I am hoping to connect/trigger plotly animations to start/stop when an HTML button is clicked (same button will play/pause an independent video). Currently, I have the sample animation working in Plotly Python/I think I need to convert to plotly.js for it to be feasible, but my question is:

- for updatemenu buttons, what event is emitted/triggered when they are clicked? Right now I have a simple play/pause–is it possible to tell when these updatemenu buttons are clicked?

Additionally, am I able to to fast forward the animation programmatically (based on an external slider)? Or if I integrate a slider to the update menu, what event is triggered there? I briefly tried Dash, but seems to run into the same issue.

Thanks!  
Peter

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 11, 2022, 8:12pm UTC](https://community.plotly.com/t/plotly-link-animation-update-to-independent-html-video/68796/2 "2022-10-11T20:12:40Z")

</div>

Hello @prehani,

It sounds like maybe you could link the animation with a slider that could get updated at n\_intervals in Dash. Then perform a callback the steps it however many frames.

For the updatemenu, in Dash this is possible by having multiple inputs to 1 output.

Plotly and Dash use React components, and are a little tricky to get the hang of when moving from straight javascript. Plotly.js has its on set of event listeners and such.

---

<div class="post-metadata">

**Author:** ![piero](https://avatars.discourse-cdn.com/v4/letter/p/b5e925/32.png) [@piero](https://community.plotly.com/u/piero)\
**Post date:** [May 16, 2024, 2:33pm UTC](https://community.plotly.com/t/plotly-link-animation-update-to-independent-html-video/68796/3 "2024-05-16T14:33:53Z")

</div>

Hi Prehani, did you ever get to the bottom of your issue?  
I am having the exact problem right now, where I want an animation and a separate video to be triggered by the same butten/event.

---

<div class="post-metadata">

**Author:** ![Saratoga](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/saratoga/32/28634_2.png) [@Saratoga](https://community.plotly.com/u/Saratoga)\
**Post date:** [May 16, 2024, 5:40pm UTC](https://community.plotly.com/t/plotly-link-animation-update-to-independent-html-video/68796/4 "2024-05-16T17:40:39Z")

</div>

The last example seems to me to be what you are looking for.

> **[Filled-area](https://plotly.com/javascript/filled-area-animation/)**
>
> Detailed examples of Filled-Area Animation including changing color, size, log axes, and more in JavaScript.
