MARKETPLACE
PLUGINS
VISIBILITY DETECTOR
Visibility Detector logo

Visibility Detector

Published June 2022
   •    Updated today

Plugin details

Detect when an element is in view and trigger actions when it enters or exits the view. Plugin uses IntersectionObserver native browser function and doesn't use any external library.
Ready to new responsive engine.

Free

For everyone

5.0 stars   •   8 ratings
1.8K installs
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

kursin.com logo
kursin.com
Joined 2021   •   4 Plugins
View contributor profile

Instructions

Place the Visibility Detector element inside the group or Repeating Group cell and you can use in workflow actions Visibility Detector enters screen or Visibility Detector exits screen.
Also you can use Visibility Detector state if it's visible or not.

To detect another element with certain ID make sure "Expose the option to add an ID attribute to HTML elements" is enabled in your app settings in General section and you can set ID of needed element in the bottom of the element properties.

You can leave ID field default value as "id" to detect Visibility Detector itself.

Also, you can set timeout to delay action (useful to show some content in repeating group lately). For example, you can use "current cell index * 100" as timeout and condition to show you main content group in RG when Visibility Detector in this cell is visible so content will be showed later. Be sure to put Visibility Detector outside of hidden group.

Please check plugin demo page:
https://testliveversion.bubbleapps.io/version-test/visibility

and demo editor:
https://bubble.io/page?type=page&name=visibility&version=live&id=testliveversion&tab=tabs-1

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation

Rating and reviews

Average rating (5.0)

Used it for 2 years in all my apps. A need to have!
December 9th, 2024
Great plugin!
September 30th, 2024
Love the plugin. But recently a error shows: Bug in custom code TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. ... Seems that the it is loaded before the DOM is finished loading. Cheers
Great !
November 15th, 2023
Thank you so much making this plugin
Working perfectly
August 17th, 2023
Great tool!
July 14th, 2023
works as it should)
Bubble