1. Installation:
Log in to your Bubble.io account.
Navigate to the app editor dashboard.
Open the "Plugins" tab from the left sidebar.
Search for "Viewport Element Detector" in the plugins marketplace.
Install the plugin to your Bubble app.

2. Element Setup:

After installing the plugin, it becomes available as an action in your workflow.
Within the Bubble app editor, select the element you want to track within the viewport.
In the element's settings section, enable the option to "Expose an element by ID attribute."
Assign a unique ID to the element by adding the desired value to the "Element ID" field that becomes visible after enabling the attribute.

3. Workflow Integration:

To utilize the Viewport Element Detector, navigate to the desired workflow where you want to trigger an action based on element visibility.
Add an action by clicking on the "+" button within the workflow editor.
Search for "Viewport Element Detector" in the action selection menu.

4. Configuration:

Choose the "Detect Element in Viewport" action from the plugin.
In the "Element ID" field, enter the unique ID of the element you wish to track. This ID should match the one you assigned in the element's property settings.

5. Actions and Conditions:

Once the element is detected within the viewport or goes out of view, you can trigger various actions or set conditions accordingly.
For example, you can animate the element, show a popup, change data, or perform any other action that enhances the user experience.

NB: How to use viewport detector in a repeating group.

Place the viewport detector in a repeating group and have the element id as "id"

In the workflow tab, add in the event "When a viewport detector exits screen." Add in an action to make changes to
whatever you want to when the viewport detector exits screen.

6. Testing and Refinement:

While testing your app, use the preview mode to ensure that the element detection is functioning as expected.
Adjust the workflow actions and conditions as needed to achieve the desired behavior.

Best Practices:

Avoid assigning the same ID to multiple elements, as this might lead to unexpected behavior.