Timer

Control the timing of animations, movements, and actions within your application or interactive content with the Timer component.

With the Timer component, you can seamlessly animate components at predefined speeds or trigger actions at specific timings. It serves as a versatile timeline tool for your creative endeavors.

Edit the Timer

The Timer is a system component that doesn't have a visible representation on the screen. You can find it in the list of Objects at the bottom left.

Here are the properties of the Timer:

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 considers user activity or interactions to determine its behavior. The timer will reset and restart its countdown or progress whenever there is user activity detected.
Autoplay: it determines whether the timer starts automatically when the screen or the component containing the timer is loaded or displayed.
Repeat: it determines whether the timer should automatically restart and repeat its countdown or progress after reaching its defined duration. It controls whether the timer operates in a single-run or repetitive mode.

💡 Note: if there are multiple repetitions of the Timer component, the stop action will only occur at the end of the repetitions.

Duration: it specifies the length of time that the timer will run before completing its countdown or progress. It represents the total duration for which the timer will be active.

Practical Use Cases

Let's explore two practical scenarios that highlight the functionality of the Timer component.

Execute an Action Based on Timing

If you want to trigger an action within a predefined timing, you can combine the Synchronization and Timer components.

To define the auto-scroll speed of a scrolling area, follow these steps:

Insert a Scrolling Area component and configure it for horizontal scrolling with a weight of 2000px.
Insert a Timer component and set it to autoplay with a duration of 4 seconds.
Insert a Synchronization component and select the other two components in the properties.
Synchronize the Timer's time with the "x" positions of the Scrolling Area.

Trigger an Action at a Specific Timing

You can also define markers on the Timer component to create a timeline. This can be useful for various 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 autoplay with a duration of 4 seconds.
Create a marker at 4 seconds
Go the Actions and add a new action
As a trigger, select the marker named Time 00:04.00
As an action Interact with a component > Pop-up > Open pop-up

By utilizing the Timer component effectively, you can orchestrate precise timing-based animations and actions within your projects. Take advantage of this powerful tool to create engaging and dynamic experiences for your users.

Trigger an Action on User Inactivity

💡 Have a look at this article: Trigger an action on user inactivity