The Timer component

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 Synchronization component with the Timer.

To set the automatic scrolling speed for a scroll area, follow these steps:

Insert a Scrolling Area 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 marker 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