# Markers

> Learn how to add targeted and specific context actions using markers in PandaSuite, including setting default markers, triggering actions, and creating dynamic markers.

https://docs.pandasuite.com/essentials/interactions/markers/

**Add targeted and specific context actions for your users with markers.**

Markers in PandaSuite are a powerful way to trigger actions or indicate specific positions in your projects. They can be static or dynamic, offering incredible flexibility for your interactive creations.

## What is a marker?

A marker is a reference point that you place in a component to trigger actions when the user reaches this point. For example, by scrolling through a page or reaching a specific moment in a video.

If a marker is created in a video, it's possible, when the video reaches this marker, to trigger an animation or the display of textual content.

## Create a marker

To create a marker, follow these steps:

[Video: the arrow of a Video Player opens its edit mode; the playhead moves to 3 then 7 seconds and + adds a marker each time]

- Select a component from the object list
- Click on the arrow to enter edit mode
- Position your component at the desired location using your mouse or the player
- On the left, click on the **+** button (for a video or an audio, next to **Times**).
- The newly created marker will be displayed in the list, offering options to edit or delete it.

> **Info**
>
> Markers do not affect the "normal" behavior of your components. If no specific action has been assigned to markers, users can still interact with the component's classic functionalities, such as zooming on an interactive image or scrolling through text.

## Set a default marker

When you have created markers, it's possible to select one that will always be activated by default when the component is loaded.

To set a default marker, choose it in the component properties or use the pin icon in the component's marker list.

[Image: Marker 1. Top pinned in the Markers panel and chosen as the Default position in the component properties]

## Trigger an action from a marker

When a marker is created on a component, it can serve as a [trigger](https://docs.pandasuite.com/essentials/interactions/triggers/), in addition to standard triggers.

To choose a marker as a trigger:

- Select the component and go to the **Actions** panel
- Add a new action: you will find your marker displayed at the top of the list
- Select the marker and associate an action defining what should happen when the marker is triggered.

[Image: Action window of the Lisbon - scroll area: its markers Top, The Alfama and The Tramway 28 head the trigger list]

## Add an action related to a marker

The marker can also become a possible action on your component.

For example, a marker on a [scrolling area](https://docs.pandasuite.com/essentials/components/scrolling-area/) adds a **Change position** action, and a marker on a [Flexbox](https://docs.pandasuite.com/essentials/components/flexbox/) adds a **Scroll to marker** action that aligns the target item to the position you defined.

To add an action related to a marker:

- Choose a [trigger](https://docs.pandasuite.com/essentials/interactions/triggers/)
- Choose the action **Interact with a component**.
- Select the component
- You will see new options appear!

[Image: Interact with a component on Lisbon - scroll: marker actions Change position, Next position and Previous position]

## Create dynamic markers

It's also possible to create markers dynamically [from a data source](https://docs.pandasuite.com/essentials/data/connect-your-app-to-a-data-source/).

This video explains how to create dynamic markers on an interactive map:

[Video: Dynamic markers tutorial: creating markers on an interactive map from a data source](https://www.youtube.com/embed/1Mj5DuQ2L5k?si=W68ZAlxwy5BdKQSQ)

### Use dynamic markers on numeric components

Use this approach when your marker positions come from structured data and you want to keep them easy to update.

- **Timer**, **Audio**, and **Video Player** use a numeric **Time** value expressed in seconds.
- **Image Sequence** uses a numeric **Frame** value.

To set it up:

1. In the component editor, create one marker with the **+** button.
2. Select the marker, choose **Enable source**, then fill in the **Source** field with your collection or other data source.
3. Add a data binding on **Time** (Timer, Audio, Video Player) or **Frame** (Image Sequence) and map it to the matching numeric field in your source.
4. Configure the marker with the same triggers or actions as a static marker. The generated markers then follow the values coming from your data.

[Image: Frames panel of a tulip Image Sequence: the menu of its marker, with Enable source framed]

[Image: Marker properties of the Image Sequence: Frame bound to the frame field, Source linked to the Tulip steps collection of the Datastore]

> **Note**
>
> If two rows resolve to the same time or frame, PandaSuite treats them as the same logical marker.