# How to Disable CesiumJS Timeline and Animation Controls in God’s Eye View

> Learn how to disable CesiumJS timeline and animation controls by setting timeline false and animation false in the Cesium Viewer constructor. Remove time slider and playback controls easily.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: how-to-guide
- Published: 2026-08-30

---

**Set `timeline: false` and `animation: false` in the `Cesium.Viewer` constructor options within [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js) to permanently remove the time slider and playback controls from the default UI.**

God’s Eye View is a CesiumJS-based visualization application that provides a streamlined mapping interface by hiding the framework’s default UI chrome. To disable CesiumJS timeline and animation controls, the application configures the viewer instance with specific boolean flags during initialization.

## Viewer Configuration in src/main.js

The Cesium viewer is instantiated in **[`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js)** (lines 94-95) where the configuration object explicitly disables the timeline and animation widgets. This occurs when the `new Cesium.Viewer()` constructor is called with the target container and an options hash.

### Disabling the Timeline and Animation Widgets

The options object passed to the constructor controls which UI components render at startup. According to the God’s Eye View source code, the following properties are set to `false`:

- **`timeline: false`** — Removes the horizontal time scrubber from the bottom of the viewport.
- **`animation: false`** — Hides the circular play/pause/step control widget.

```javascript
// src/main.js – Cesium Viewer initialization
import * as Cesium from 'cesium';

const viewer = new Cesium.Viewer('cesiumContainer', {
  // Turn off Cesium UI chrome
  timeline: false,      // ⬅ disables the time slider
  animation: false,     // ⬅ disables play/pause/step controls
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  vrButton: false,
  selectionIndicator: false,
  infoBox: false,
  // … other app‑specific options …
});

```

Because the viewer is built once at startup, these controls are permanently hidden for the lifetime of the application unless the source code is altered and the viewer is recreated.

## Re‑enabling Controls for Debugging

If you need to restore the timeline or animation widgets after the viewer has been created—typically for debugging temporal data—you can manually manipulate the CSS display properties of the underlying DOM containers:

```javascript
// Re‑enable after viewer creation (for debugging only)
viewer.timeline.container.style.display = '';   // show timeline
viewer.animation.container.style.display = ''; // show animation controls

```

This approach does not require reconstructing the `Cesium.Viewer` instance and allows you to toggle visibility programmatically during runtime.

## Summary

- **[`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js)** contains the `Cesium.Viewer` constructor where God’s Eye View disables the default UI.
- Pass **`timeline: false`** to remove the bottom time slider.
- Pass **`animation: false`** to hide the play/pause/step controls.
- These settings take effect only at initialization; changing them later requires rebuilding the viewer.
- You can temporarily reveal the widgets via `container.style.display` for debugging purposes without restarting the application.

## Frequently Asked Questions

### Where is the Cesium viewer initialized in God’s Eye View?

The viewer is created in **[`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js)** at approximately lines 94-95 using the statement `new Cesium.Viewer('cesiumContainer', { ... })`. This file serves as the entry point for all Cesium configuration.

### Can I hide the timeline while keeping the animation controls?

Yes. Set only **`timeline: false`** while omitting the `animation` property (or setting it to `true`) in the constructor options. This retains the circular playback widget in the top-left corner while removing the horizontal scrubber at the bottom.

### Does disabling these controls affect Cesium’s internal clock?

No. The `timeline` and `animation` properties only govern the **UI widgets**. The underlying `viewer.clock` continues to run, and you retain full programmatic control over time advancement, pause states, and clock multipliers through the JavaScript API.

### How do I toggle the timeline visibility at runtime?

After the viewer is instantiated, you can toggle visibility by accessing the DOM containers directly:

```javascript
// Toggle timeline visibility
const isHidden = viewer.timeline.container.style.display === 'none';
viewer.timeline.container.style.display = isHidden ? '' : 'none';

```

This method is useful for debugging but should not be used for production user interfaces, as it bypasses Cesium’s widget lifecycle management.