New Plugin - On Screen Detector

Hi all, I’ve just released a new free plugin- On Screen Detector.

It lets you detect when an element of your choosing enters or exits the viewport (the user’s screen). You can use it to animate elements as the user scrolls to them, or trigger any other event you can think of. Make your landing pages look like those fancy wordpress themes :wink:

Available now, check it out and let me know what you think.
Demo here: http://plugindemos.bubbleapps.io/version-test/onscreen

15 Likes

Nice work @dambusmedia

Very simple, but really helpful in some situations.

Would be awesome to have a dynamic ID if possible for the future.
image

I had not seen this plugin before, it’s very cool, will sure use it in the future.

Thanks @dambusmedia

Hey,
Please check out the following plugin:
https://bubble.io/plugin/elements-in-view-1558712031372x698693374844338200

It supports dynamic values. Also, you are to specify a list of ids.

I’ll create a demo with the doc soon.

For instance, if the element’s value contains the id, that means, that the element is visible on the page.

I’m using this plugin to speed up the pages.

For instance, the following page contains 4 repeating groups:
https://mintflow.io
This plugin helps me to enable their source sequentially.

3 Likes

Nice work there @lottemint.md :+1:

But probably best to start a new post with the announcement, its worthy of it.

Thanks!
Yes, you’re right. I’ll create a new topic with the announcement soon. :slight_smile:

1 Like

@lottemint.md You have a really nice site, design is top notch, did you make the illustrations yourself?

I have also thought about how one could “delay” certain content from being loaded with Bubble. Similar to what bigger sites use, like Facebook, Google etc…

How much speed improvement have you noticed?

1 Like

@stone, thanks for your feedback! The illustrations, icons are made by a person from my team.

I tested it using several devices, including the budget one. It works pretty much faster than before.

Now, after the page has been loaded I’m not pushed to wait a couple of seconds until the mobile menu will be shown by clicking on the burger. In the case, when I want to open it immediately.

Regarding PageSpeed Insights by Google
Even a page with a single button has bad results. :frowning:

1 Like

With your plugin do you have a pixel “offset” setting?
I’m noticing I have to wait a bit until the things load on my screen, maybe if they could start loading slightly before they are seen.

In what way does it improve speed, is it just setting the source of the repeating group?

Yeah pagespeed seems to be pretty harsh on bubble apps, most websites too, actually. I think it’s because of the initial JS and content you need to download before it starts rendering elements.

Did you mean a delay property?

The default source of a repeating group should be empty.
The repeating group should have the following conditional:
If the ElementsInView’ values contains id1 > Data Source: Do Search for…

1 Like

Right, thanks.

I mean settings like the other plugin in this thread, threshold and offset.

Also, what does “remove elements from values” mean here?

image

Thanks for answering my questions.

Oh, I see. Thanks for the details. Perhaps I’ll add them in the next update.

If the previous elements which were in view are not in view now, then the plugin will remove them from its state.

2 Likes

Hi,

Works perfectly on desktop. However it doesn’t seem to work on mobile devices (IOS, Android). Am I missing something?

Hi Ton, I’ve just checked and it seems you’re right, it’s stopped working on mobile devices. I’ll see what I can do to fix that.

1 Like

Is this plugin still functional? I’m not seeing any workflow to actually trigger something when an element is in view.

1 Like

Have a look at the attached screenshot, please:

This plugin doesn’t trigger any events in the workflow section. You can use it via an element’s conditional section.

Hi! Yeah I figured out how it works after a bit of fiddling. Very cool concept and very cool for speeding up page load!

1 Like

Glad to hear that you like it! :blush:

Very good!!!

It is very useful and works fine.
However, when the OnScreen detector is visible on page load, it doesn’t trigger the workflow, it only triggers the workflow when it was not on your screen at first and then enters in.
Which is quite annoying, because the first element of my repeating group doesn’t have the workflow I set up for it :’(