The Timer component

The Timer component allows you to manage time interactively in your PandaSuite projects. It is particularly useful for triggering actions at specific times, controlling animations, or creating dynamic interactions based on time. This component is invisible in the interface but runs 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 a game
  • Triggering actions when the user is inactive
  • Synchronizing with other components, such as a scrolling area

If you want to launch an animation after a specific delay or display an element automatically after a few seconds, you can use the Delay property associated with the action. There is no need to use a Timer component for this.

Setting up the component

Inserting the Timer component

  1. Go to the Components section in PandaSuite.
  2. Add the Timer component to your project.
  3. Note that the Timer is a system component that has no visible representation on the screen. It can be accessed from the Objects list at the bottom left.

Initial configuration

After adding the component, configure its essential settings:

  • Type: Choose between Normal and Inactivity.
    • In Normal mode, the timer runs for the specified duration and starts counting down or progressing once activated or triggered.
    • In Inactivity mode, the timer detects user inactivity and resets upon any activity.
  • Auto-play: Automatically starts when the screen or the component containing the timer is displayed.
  • Repeat: Automatically restarts after each cycle.
  • Duration: Total duration of the countdown.

Component features

Trigger events

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

  • Start Playback
  • Pause
  • Stop Playback
  • End Playback
  • Time Reached: If a marker has been set

💡 If multiple repetitions are enabled, the Stop Playback event will only occur at the end of the repetitions.

Interactive actions

Here are the actions associated with this component:

  • Play / Pause
  • Play
  • Pause
  • Stop
  • Fast Forward
  • Rewind
  • Restart from the Beginning

If a marker has been set:

  • Change Time
  • Next Time
  • Previous Time
  • Random Time

Advanced interactions

Synchronization 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 component and configure it.
  2. Insert a Timer with a duration of 4 seconds and enable auto-play.
  3. Add a Synchronization component and select both components.
  4. Synchronize the Timer's time with the "x" position of the Scrolling Area.

Using markers

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).

Practical examples

Displaying a countdown

  1. Add a Timer with a duration of 30 seconds.
  2. Insert a text block to display the remaining time.
  3. Use data binding to link the Timer value to the text.

To display the remaining time in seconds:

  • Apply the Subtract function (X - Elapsed Time).
  • Multiply by -1 to invert the values.
  • Use FormatNumber to avoid decimals.

Additional resources

⚡️ TEMPLATE AVAILABLE: Number Animation 

Add this template to your account in a few clicks. Modify and customize it freely.









The timer is a powerful component that allows you to manage time interactively within your projects. Whether it's animating content, creating games, or controlling the flow of an experience, the timer adapts to many use cases. It offers precise control over time management and enables smooth interaction with other components.


Insert a Timer Component

A timer is a component that can either display time or trigger an action after a set delay, defined in seconds. It can be used to initiate specific actions, such as displaying an element, switching slides, or stopping an animation.

Go to the Components section and add the Timer to your project. The Timer is a system component that is not visible on screen. You can find it in the Objects list at the bottom left.

Here are the Timer properties:
  • Type: Choose between Normal and Inactivity. In Normal mode, the timer counts down or progresses based on the specified duration and begins when activated or triggered. In Inactivity mode, the timer resets and restarts based on user activity. It resets whenever user activity is detected.
  • Auto-start: Determines if the timer starts automatically when the screen or component containing the timer is loaded or displayed.
  • Repeat: Determines if the timer restarts automatically and repeats its countdown or progress after reaching the set duration, controlling whether the timer is single-use or repetitive.

💡 Note: If the Timer component repeats, the stop action will only occur at the end of all repetitions.

  • Duration: Specifies how long the timer will run before completing its countdown or progress, representing the total active time for the timer.

Practical Use Cases

Let's explore several practical scenarios showcasing the Timer's functionality.

Run an Animation Over a Set Time

To run an animation over a specific duration, you can combine the component with the Timer.
To set the automatic scrolling speed for a scroll area, follow these steps:
  • Insert a component and configure it for horizontal scrolling (2000 pixels).
  • Insert a Timer component and set it to Auto-start with a 4-second duration.
  • Insert a Synchronization component and select both other components in the properties.
  • Sync the Timer's time with the "x" positions of the Scroll Area.

Trigger an Action at a Specific Time

You can also add markers to the Timer to define a series of events. This is useful for purposes such as creating game mechanics or orchestrating sequences of actions without relying solely on delays.
To automatically display a pop-up after 5 seconds, follow these steps:
  • Insert a Pop-up component and customize its content.
  • Insert a Timer component, set it to auto-start with a 4-second duration.
  • Create a at 4 seconds.
  • Go to Actions and add a new action.
  • As a trigger, select the marker named Time 00:04.00.
  • As the action, select Interact with a component > Pop-up > Open Pop-up.
By effectively using the Timer component, you can orchestrate animations and actions based on precise timing in your projects. Take advantage of this powerful tool to create engaging and dynamic experiences for your users.

Display a Countdown

You can also use the Timer component to create a countdown, such as for a quiz, game, or interactive animation. Here’s how to create a countdown in PandaSuite:

  • Insert a Timer component on your screen and set the duration to X seconds (e.g., 30 seconds).
  • Add a text block to display the countdown. This text will be linked to the timer to display the remaining time.
  • Use data binding to display the timer’s value.
  • To reverse the values and display the remaining time, use the Subtract function of X seconds and the Multiply function by -1.
  • To display the number in a readable format (without decimals), use the FormatNumber function in the formula. This will show the remaining time as an integer, without decimals.

Trigger an Action After User Inactivity

Check out this article: Trigger an Action After User Inactivity

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.