# Timer

> Use the PandaSuite Timer component to manage time, trigger precise actions, and create dynamic interactions.

https://docs.pandasuite.com/essentials/components/timer/

**The Timer component allows you to manage time interactively in your PandaSuite projects. It is particularly useful for triggering actions at specific moments, controlling animations, or creating time-based dynamic interactions.**

This component is invisible in the interface but operates in the background to orchestrate events.

## Use Cases

The **Timer** component can be used in various scenarios, such as:

- **Creating a countdown** for a quiz or game
- **Triggering actions when the user is inactive**
- **Synchronizing with other components**, such as a scrolling area

> **Info**
>
> If you want to start an animation after a delay or automatically display an
> element after a few seconds, you can use the **Delay** property associated
> with the action. No need to use a Timer component for this.

## Setting Up the Component

### Insert the Timer Component

1. Go to the **Components** section in PandaSuite.
2. Add the **Timer** component to your project.

Note that the Timer is a **system component** that has no visible representation on the screen. It is accessible from the **Objects** list at the bottom left.

[Image: Timer selected in the Objects list at the bottom left, with its settings on the right: Type, Auto-play, Loop and Duration]

### Initial Configuration

After adding the component, configure its key settings:

- **Type**: Choose between **Normal** and **Inactivity**.
  - In **Normal** mode, the timer operates based on the specified duration and starts counting down or progressing as soon as it is activated or triggered.
  - In **Inactivity** mode, the timer detects the absence of user interaction and resets with each activity. This allows you to [trigger an action on user inactivity](https://docs.pandasuite.com/essentials/interactions/trigger-an-action-on-user-inactivity/).
- **Auto-play**: Automatically starts when the screen or component containing the timer is displayed.
- **Loop**: Automatically restarts after each cycle.
- **Duration**: Total countdown duration.

## Component Features

### Trigger Events

The **Timer** component allows you to trigger actions based on time. Here are the main trigger events:

- **Start playing**
- **Pause**
- **Stop playing**
- **End playing**
- **Time**: If a marker is defined

> **Info**
>
> 💡 If multiple repetitions are enabled, the **Stop playing** trigger event
> will only occur at the end of all repetitions.

### Exposed properties

The **Timer** component exposes the following values for [data binding](https://docs.pandasuite.com/essentials/data/data-binding/):

- **Current value**: Current timer value, expressed in seconds.
- **Duration**: Total timer duration, expressed in seconds.

### Interactive Actions

Here are the actions associated with this component:

- **Play / Pause**
- **Play**
- **Pause**
- **Stop**
- **Forward**
- **Rewind**
- **Restart from the beginning**

If a marker is defined:

- **Change time**
- **Next time**
- **Previous time**
- **Random time**

## Advanced Interactions

### Synchronizing with Other Components

The Timer can be **synchronized** with other components for complex interactions. For example, to **scroll an area horizontally in sync with a Timer**:

1. Add a **[Scrolling Area](https://docs.pandasuite.com/essentials/components/scrolling-area/)** component and set it up.
2. Insert a **Timer** with a duration of **4 seconds** and enable auto-play.
3. Add a **[Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/)** component and select both components.
4. **Synchronize the Timer's time with the "x" position** of the Scrolling Area.

### Using Markers

[Markers](https://docs.pandasuite.com/essentials/interactions/markers/) allow you to execute actions at specific times:

1. Create a marker at **4 seconds**.
2. Go to **Actions**.
3. Add an action **triggered by the marker**.
4. Select the desired action (e.g., open a pop-up).

You can also generate these markers from a data source. Create one marker, choose **Enable source**, set its **Source**, then bind **Time** to a numeric field expressed in seconds. For the full workflow, see [Markers](https://docs.pandasuite.com/essentials/interactions/markers/).

## Practical Examples

### Display the Timer

1. Add a **Timer** and choose its maximum duration.
2. Insert a **text block**.
3. Use [data binding](https://docs.pandasuite.com/essentials/data/data-binding/) to link the Timer **Current value** to the text. The value is expressed in seconds.
4. To display the time in the correct format, use the [Format Date](https://docs.pandasuite.com/essentials/data/functions/) function. This function requires a value expressed in milliseconds:

- Multiply the time value by 1000 to convert it to milliseconds.

  [Image: Data window of the text block: Timer Current value, then the Multiply and Format Date functions; the preview shows 00:00]

- Then, to format it as MM:SS, select **Custom** and use the universal format codes **mm:ss**.

[Image: Format Date function on the text block: Custom type, mm:ss format and UTC time zone to display the timer as MM:SS]

- For the Time Zone, select UTC, the global reference time that is not affected by time zones.

[Template: Stopwatch and countdown](https://pandasuite.com/dashboard/use-template/BgnpnY4B5IBMJWwgNfm3)

### Display a Countdown

To display the timer as a countdown, the process is similar to displaying the timer, but with different functions and calculations:

1. Add a **Timer** and choose its duration.
2. Insert a **text block**.
3. Use [data binding](https://docs.pandasuite.com/essentials/data/data-binding/) to link the Timer **Current value** to the text. The value is expressed in seconds.
4. To display the time in countdown mode:
   - Apply the **Subtract** function and enter the total timer duration (in seconds).
   - Use the **Multiply** function to multiply by **-1** to reverse the values.
   - Use the [Format Date](https://docs.pandasuite.com/essentials/data/functions/) function. Multiply the time value by 1000 to convert it to milliseconds.
   - Then, to format it as MM:SS, select **Custom** and use the universal format codes **mm:ss**.
   - For the Time Zone, select UTC, the global reference time that is not affected by time zones.

[Image: Countdown data binding: Timer Current value, then Subtract, Multiply twice and Format Date; the preview shows 02:00]

[Template: Stopwatch and countdown](https://pandasuite.com/dashboard/use-template/BgnpnY4B5IBMJWwgNfm3)

### Animate a Counter

Learn how to create custom animations for numerical data, such as an animated counter in interactive infographics.

[Video: Animated counter on a mobile screen: under Key figures, the numbers rise from 0 to 100 euros and from 0 to 20 years]

[Template: Number Counter Animation](https://pandasuite.com/templates/number-animation/)

### Trigger an Action on Inactivity

Read the dedicated article to learn more:

- [Trigger an action on user inactivity](https://docs.pandasuite.com/essentials/interactions/trigger-an-action-on-user-inactivity/)