Element scrolling WITH page

Hello,

I am trying to implement an element scrolling along with the page as the user scrolls down the page. Is this possible to implement?

I have an example here of what I am trying to achieve:

As you can see in this clip, the user can scroll down past the text but the element on the left (the iphone mockup) scrolls along with the user and updates). Any possible way to build this in bubble?

Thanks.

you need to use floating group

can you be a little bit more specific?

Have the layout of your page as a row and have a floating group floating to the right and a group containing your contents on the left.

In bubble’s elements there is “containers”, one type of containers is the “floting group” wich can help you with this.
In the bubble’s academy thre is great tutorials about containers and floating group.

2 Likes

Hello,

I am trying to make a floatinggroup appear on the page when user scrolls up, as of now I am able to make it appear when user scrolls down to certain position on page; but when user is scrolling back up and back at the position, the floating group does not appear unless they begin scrolling down again.

How do I make it appear when scrolling up?

Here is how it is now: as you can see when scrolling up it is not there, only when scrolling down:

I believe Do When’s only trigger once each time a condition becomes true and does not reset until the condition becomes false. So just using a > forces you to scroll up until the trigger gets reset.

I suggest this BUT did not test it… so “oops” no promises but would be interested to find out if it works.

The Do When that shows the element should have two conditions
Page Scrolling Position is >= X 1 or Page Scrolling Position is <= X2

  • where X1 is for example 1000 and X2 is some number larger than 1000 if you want it to trigger at the same relative background location.

The Do When that hides the element also should have two conditions (for example)

Page Scrolling Position <= 900 or Page Scrolling Position >= 1500 this puts the graphic outside of the bounds.

Hope this helps.