1. Give the target element an ID
In the Bubble Editor, assign an ID Attribute to the element you want to track.

Example:

hero-section

Enter the ID in Target Element ID.

Both hero-section and #hero-section are accepted.

2. Choose the Element Anchor

Use Element Anchor to choose which vertical point of the element should be tracked:

• Top
• Center
• Bottom

All position states and trigger calculations use the selected anchor.

3. Set the Trigger Point

Enter the position in the viewport where the workflow should trigger.

Examples:

• 0 = 0%
• 25 = 25%
• 50% = center of the viewport
• 200px = 200 pixels from the top

Values without a unit are treated as percentages.

Use % for responsive viewport-based triggers or px for a fixed position.

4. Choose the Trigger Mode

Once

Fires only the first time the target reaches the trigger point.

Use the Reset Trigger action if you want to enable it again.

Every time

Fires whenever the target crosses the trigger point again.

The event does not continuously fire while the condition remains true.

5. Configure Trigger on Load

Use Trigger on Load to decide what happens when the target already satisfies the trigger condition when it is first detected.

No updates the states without firing the event.

Yes also fires the Trigger point reached event when the target is already at or above the trigger point.

6. Use the workflow events

Available events:

• Trigger point reached
• Trigger point left

Trigger point reached fires when the selected anchor crosses from below to at or above the trigger point.

Trigger point left fires when it crosses back below the trigger point.

7. Use the live position states

Available states:

• Viewport Y
• Page Y
• Viewport Y %
• Distance to Trigger
• Is Trigger Reached
• Is in Viewport

Position states continue updating regardless of the selected Trigger Mode.