# How to add a listener to the pause button of the animation widget?

**URL:** <https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852>\
**Category:** CesiumJS\
**Created:** [December 4, 2013, 4:38pm UTC](https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852 "2013-12-04T16:38:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkos200](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@dkos200](https://community.cesium.com/u/dkos200)\
**Post date:** [December 4, 2013, 4:38pm UTC](https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852/1 "2013-12-04T16:38:00Z")

</div>

I need a way to know when the pause button was clicked. Any ideas?

-Thanks

---

<div class="post-metadata">

**Author:** ![Scott\_Hunter](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_hunter/32/2006_2.png) [@Scott\_Hunter](https://community.cesium.com/u/Scott_Hunter)\
**Post date:** [December 4, 2013, 6:58pm UTC](https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852/2 "2013-12-04T18:58:17Z")

</div>

You can observe the ClockViewModel.shouldAnimate property to detect when the clock is paused, for example:

Cesium.knockout.getObservable(viewer.animation.viewModel.clockViewModel, ‘shouldAnimate’).subscribe(function(value) {

console.log(value);

});

This will print false when the clock is paused.

---

<div class="post-metadata">

**Author:** ![dkos200](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@dkos200](https://community.cesium.com/u/dkos200)\
**Post date:** [December 4, 2013, 7:22pm UTC](https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852/3 "2013-12-04T19:22:28Z")

</div>

This is a fantastic solution! Thanks.

---

<div class="post-metadata">

**Author:** ![dkos200](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@dkos200](https://community.cesium.com/u/dkos200)\
**Post date:** [December 9, 2013, 6:17pm UTC](https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852/4 "2013-12-09T18:17:05Z")

</div>

Scott,

Your solution worked very well until I realized that I only want a listener for an actual "on click" event on the pause and play buttons. (Rather than listening for when the shouldAnimate variable changes.)

The problem is I manually change this variable in different places in my code and it's triggering my listener even when I haven't actually clicked on the pause/play buttons.

I want it to behave differently in different cases. I want to be able to know when the pause/play buttons have been clicked, without relying on what the status of the shouldAnimate variable is.

Do you know of a way to do that?

---

<div class="post-metadata">

**Author:** ![Geoneer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/geoneer/32/2449_2.png) [@Geoneer](https://community.cesium.com/u/Geoneer)\
**Post date:** [January 5, 2017, 6:28pm UTC](https://community.cesium.com/t/how-to-add-a-listener-to-the-pause-button-of-the-animation-widget/852/5 "2017-01-05T18:28:48Z")

</div>

This helped me also! Thanks for your short but nice code! Now I can disable my camera flight from the pause button.

///=======================================================================================

/// Function to pause the billboards flight with the animation pause button.

///=======================================================================================

function animationButtonStatus() {

```
Cesium.knockout.getObservable(viewer.animation.viewModel.clockViewModel, 'shouldAnimate').subscribe(function (value) {

    

    flyBillboards = value;

});

```

}

///================================================================================

/// default fuction to fly to a location

/// refactor this part!

/// information about the height of the location:

/// [http://stackoverflow.com/questions/28291013/get-ground-altitude-cesiumjs](http://stackoverflow.com/questions/28291013/get-ground-altitude-cesiumjs)

/// [https://groups.google.com/forum/#!msg/cesium-dev/08DYCm0z5sM/yWgltqPkDQAJ](https://groups.google.com/forum/#!msg/cesium-dev/08DYCm0z5sM/yWgltqPkDQAJ)

///================================================================================

function flyTo(id, point\_A, point\_B, zoomin) {

try {

animationButtonStatus();

if (flyBillboards == true) {

var pointOfInterest = Cesium.Cartographic.fromDegrees(point\_A.lon, point\_A.lat, 5000, new Cesium.Cartographic());

Cesium.sampleTerrain(viewer.terrainProvider, 9, [pointOfInterest]).then(function (samples) {

var heading = Cesium.Math.toRadians(cameraManager.heading);

var pitch = Cesium.Math.toRadians(cameraManager.pitch);

viewer.scene.camera.flyTo({

destination: Cesium.Cartesian3.fromDegrees(point\_A.lon, point\_A.lat, samples[0].height + cameraManager.height),

duration: cameraManager.duration,

complete:

function () {

flyToComplete(id, point\_A, point\_B, samples[0].height, zoomin);

}

});

});

}

}

catch (ex) {

error(ex);

}

}