Dynamic horizontal stacking panels with scroll

Helo. I have another question. I want to create a horizontal scroll, that would stack panels at left. Lets say i have 5 panels all shown successively, and horizontal scroll. Now, panel 1 has fix position as first panel, when i scroll 2+ will cover 1 till end point (end point for panel 2 is 24px margin left). When it hits 24px on X, the 3 panel starts to cover panel 2 till it reaches 48px margin on X and so on. This picture shows the far right scroll and state of all panels stacked. When i scroll back it goes vice versa, the 4 panel will cover 3 until 4 reaches at end of panel 3. Than both moves till 3 reaches end of panel 2, than 2+ all moves together etc.
Right now i have no clue how to create this. Can someone help me please?

Its a little hard to follow what you are looking for, can you upload images of some of the other states you want to see while scrolling?

Is this better? (for description look below images)

Far right scroll (all pannels are stacked)

Scrolling to left, when #5 reaches end of #4, the #4 and #5 are scrolling to right revealing #3

When #4 reaches end of #3, the #3 moves along with #4 and #5 and starts to reveal #2.
And vice versa.

By the way, is there any option to trace scroll position of panel inside panel? So i could use if panel 2 scrollX is 24…

Hi,

Here try that:
panel scroll horizontal_Vf.rp (62.2 KB)

It’s not so good when scrolling left (a random gap between dynamic panel appears) but you will maybe improve it

Best,

Hm…your rp does not work. Can you also explain a bit what you did with variables?
EDIT: ow i see how you did. I have to minimize browser. Can this be done inside dynamic div? Like in my .rp? I need it inside of dynamic panel, but than i think ScrollX wont work.

Hi,

I dit it with windows scroll so you need to resize your browser’s windows:

so you can use the horizontal scroll:

Regarding variable:

  1. I used a Global Variable “Padding” to store your 24px.
    As it is if you want to change this value, you only need to change this variable:

  2. I used local Variables (“LVAR1”,“LVAR2”, …) to retrieve data about widgets on the screen:
    a. width of the dynamic panel
    b. distance between two panels

and I only looked when dynamic had the right to scroll ( when the scroll of the windows is less than the width of the 1st dynamic panel minus 24px for the 2nd Dynamic panel)
Else I force the 2nd panel to move to the place where there is 24px with the 1st panel (1st-panel.X + 24px)

I didn’t know you wanted it all in a panel.
Could you send me your prototype so I look at it?

Thanks

Hey. Thank you for this explanation, makes sense now :). And sorry, i see i did not specify i want this in a dynamic panel. So yes, i need this to be in dynamic panel :slight_smile: (.rp below). Altho i did come just a step further…i have created local variable for each panel [[second.x]] and to calculate this at scroll. But the thing is i only get starting point of panels. Can not figure how to track scrolling/position of element, and how to pin element when it reaches left margin.
I saw the pin to browser but for some reason, margin is disabled on left, i do not know why:

Scrolling panel.rp (63.3 KB)

If you manage to solve this, explanation would be more than helpful, so i can understand and learn.

Hey,

Here:
Scrolling panel_VP.rp (90.4 KB)

I hadn’t used variables in this prototype (width-24px) but directly the value => 276, 552, 828 & 1104px.
So I you want to parametrize your widgets (change the width, change the padding, …) please use my previous prototype as a model

The trick here is the way to block panels. On want to see the panels so they are at 24, 48, 72, … px from the left edge of the “wrapper”

I use the move action like in the previous prototype
To manage dynamic panel scroll, one need to use it in the formula
-“wrapper”.scrollX + 24 for the 2nd panel,
-“wrapper”.scrollX + 48 for the 3rd panel,
- …
So it seems that panels are at 24, 48, 72, … px from the left edge of the “wrapper”.
In reality they move at the same speed as the scroll plus 24, 48, … px

Hope it helped,

By the way I didn’t find a “Pin to browser”'s action usable when simulating:

one need to define it before and one can’t change it when using the prototype :frowning: :

If you find such an action, please keep me informed :slight_smile:

This! Thank you :). I had same idea, but just could not make it work. Tracking scrolling panel and few ifs is good method. In my case i just could not make local variable and .scrollX work. As i see you put all this on scrolling panel onScroll event. I understand this all now, but one thing, is the first “if true” a must? I did not put that before, so maybe this was the case of not working?
Again one thing (just a question, not to bug you :slight_smile: ), when i scroll i get random margins between panels. Why is this? Is this something you just can not pass or is this just because mockup?

I did not get this part:

So I you want to parametrize your widgets (change the width, change the padding, …) please use my previous prototype as a model

In original prototype i have various widths of panels, in my mind i think this should also work with this method or did you mean that with various widths it will not work?

Again, thank you for help

Ow and another thing i have noticed and do not know why, the scroll X (display) is not accurate. Example: when i scroll slowly to one point, the value is not the same if i scroll fast to same point. It can get to ±50 or even 100. Why is that? Because of this, we see margins between panels as you mentioned earlier.

Nice work, PierreJ. :+1:

I built on your solution, adding conditions to move the panels as the scroll is less than or equal to certain points, in addition to your conditions to move them as the scroll is greater than or equal to those points. This aims to move them to their starting–or expanded–locations when needed, in the same way you move them to their collapsed locations. This handles the gaps which can occur when the scroll speed is too fast or too slow. Although, if you scroll back and forth quickly you can briefly see the gaps. See Home (2) in the .rp below.

Jerry000, I also made a variation to handle dynamic panel “cards” of different widths. To do this I had to use variables and some basic math–which is all PierreJ was saying, I believe, in terms of using his approach as a model.

This looks like you were referring to the
"If True set text on scroll equal to [[LVAR1.scrollX]]"
–and no, that is not required for any of this, just a way to debug and track the current value of the scrollX variable.

Scrolling panel_VP_2.rp (174.9 KB)

Nice work too mcb66,
If one goes too fast, a gap appears but else it goes really smooth :relaxed:

I didn’t know widget.right expression.
So thank you, I will be able to use it on my future prototypes :grin: with .left, .bottom and .top.

I did a last version which adapt itself if you want to place your “wrapper” something else in the page than positionX=0 :
Scrolling panel_Effective for same or different widths.rp (224.2 KB)

I desactivate the “Pin to browser” on dynamic panel 1, and add an action onScroll so it moves with the scroll

Best,

@mbc66, this is great or perfect :). However, i still need some explanation. From where did you get .right? I look at Variables in RP7 list and there is no .right. Is this some hidden trick?
In your prototype if i made it simple for explanating your prototype (just to see if i get it). the function .width reads panels width, than you took that width and add next panel width (+). So, if scroll number is less than panel1 width + panel2 width, it moves all elements by scroll. And vice versa, if scroll number is greater than panel1 width + panel 2 width than move all panels…here is where i get stuck “[[LVAR1.scrollX+48]]”.

Other than that, this is what i was looking for. Thank you both very much @mbc66 and @PierreJ :slight_smile:

Yes this is an hidden trick :smiling_imp: :yum:

Axure’s documentation about expressions, formula, etc. is a bit poor in my opinion. So I didn’t found it here :pensive:

Try to insert variable or function:


and you will find .right, .left, …

Basically it give you the position of the selected widget:

  • on the right (x + widget.width)
  • on the left (x)
  • on the top (y)
  • on the bottom (y + widget.height)
    Isn’t it @mbc66?

About [[LVAR1.scrollX+48]], you should be speaking of this, isn’t it?

It’s the trick to lock the different panels to 24, 48, 72 & 96 px of the left of the “Wrapper”.

Hi @Jerry000,

I don’t know if in the end you understood the “[[LVAR1.scrollX+48]]” but here a few explanation.

Today, if one doesn’t use any actions the scroll of your 5 dynamic panels look a bit like that:

But what you would like is:

So in the case of Dynamic panel 3 one have to do that:


so one need to move the Dynamic panel 3 to “[[LVAR1.scrollX+48]]” (with LVAR1 matching the “Wrapper”'s widget)

Hope it helped,
Best,

@PierreJ, this is very good explanation, and this makes more sense now with visual representation. Good job and thank you very much, i appreciate.