Skip to main content
Version: 4.x

Timeline tool

Reveal allows for applying styles to nodes based on date property and can be viewed as a playable entity where node styles are applied to different nodes which can be used to showcase progress of the model construction. The API is influenced by the node styling API and it's recommended to read up on this documentation before reading this document.


The test data used in the documentation site is for testing and to show the capabilities of the tool. The examples shown is therefore might not be a ideal model construction progression.


The timeline tool provides ability to apply styles by date. It works by creating a set of "keyframes" for provided dates. Each keyframe has a set of associated styled node collections.

Creating keyframes

To create a Keyframe, use createKeyframe(date: Date)

  • date - Date reference for the keyframe
const keyframe = timeline.createKeyframe(new Date('2021-10-05'));

Add styled node collections to keyframes

Tool provides feature to add nodes & styles to a Keyframe or number of Keyframes or to all of the Keyframes. For more information on assigning styles please refer CAD Styling.

const nodes = new AssetNodeCollection(sdk, model);
keyframe.assignStyledNodeCollection(nodes, { renderGhosted: false, color: new THREE.Color(0.6, 0.8, 0.45) });

Remove styled node collections from keyframes

Styled node collections can be removed from keyframes. unassignStyledNodeCollection(nodeCollection: NodeCollection)

  • nodeCollection - Node set to be removed from keyframes.

Play timelines

We use play(startDate: Date, endDate: Date, durationInMilliSeconds: number)

  • startDate - Keyframe date to start the playback of the timeline keyframes.
  • endDate - Keyframe date to stop the playback of the timeline keyframes.
  • durationInMilliSeconds - Number of milli-seconds for the full playback of keyframes.

Note that the dates doesn't need to match the keyframe dates - the playback will be performed on a "virtual" timeline that is linear in time and update the styling whenever a new keyframe is activated. Only one keyframe will be active at any given time, i.e. the model will only have styling from one keyframe active at any time.

Live Editor

Stop timeline playback


Pause timeline


Resume timeline


Get Keyframe by Date

getKeyframeByDate(date: Date)

  • date - Date of the Keyframe which needs retrived.
const keyframe = timeline.getKeyframeByDate(new Date('2021-10-06'));

Reacting to date changes while in playback mode

While in the play state, the tool emits events which will be helpful for the users to calculate the progression of the playback of the timeline. The tool provides a TimelineDateUpdateDelegate event which can be subscribed to received below data.

  • date - Virtual date which can be used to calculate progression.
  • activeKeyframe - Current active Keyframe in the playback.
  • startDate - Virtual date to start the playback of the timeline.
  • endDate - Virtual date to stop the playback of the timeline.

If we have subscribed to dateChanged event and if there are no active Keyframe during Timeline playback, than activeKeyframe data will be undefined value.

// import { TimelineDateUpdateDelegate } from '@cognite/reveal';

timeline.subscribe('dateChanged', (data) => {
const date =;
const keyframe = data.activeKeyframe;
const startDate = data.startDate;
const endDate = data.endDate;

To unsubscribe from TimelineDateUpdateDelegate event

timeline.unsubscribe('dateChanged', (data) => {});

Removing Keyframe

By Date

To remove any Keyframe, use removeKeyframeByDate(date: Date)

  • date - Date of the Keyframe which needs to be removed from the Timeline.
timeline.removeKeyframeByDate(new Date('2021-10-07'));

By Keyframe

To remove any Keyframe, use removeKeyframe(keyframe: Keyframe)

  • keyframe - Keyframe to be removed from the Timeline.

Keyframes in Timeline

Gets all Keyframes in the Timeline

const allKeyframes = timeline.getAllKeyframes();