How to make swipe left and right when the last content is half out from the screen?

newbie-question
#1

Hi,

Can somebody please help. How to make swipe left and right when the last content is half out from the screen?

For example;

image

#2

Select all the widgets in that horizontal list (in your screenshot, everything from “Bank Transfer” to “5s”) and create a dynamic panel (dp) --I’ll call this “Content dp”. Keep the default “Fit to Content” setting for this dp. Then, select “Content dp” and create another dp–I’ll call this “Mask dp”. Change the size of this dp to match the “viewport area” or “viewable mask” for the “Content dp” list (in your screenshot, drag the right edge of “Mask dp” to the edge of your screen area and/or blue background area.) Changing the size will automatically uncheck the “Fit to Content” setting, which is what you want.

Then you need to specify how to move the “Content dp” widget when a swipe (and/or drag) gesture is detected. There are several ways to do this depending on how much control you need for this experience, and how much time/complexity you want to devote to this. There are many threads in the forum with various solutions for this, as well as adding momentum to the swipe gesture.

Here is a quick demo of a few different methods using your screenshot above.
horizontal list swiping.rp (123.4 KB)

#3

Hi mbc66,

can you please guide me with the file attached. i got a hard time imagine your steps.

slide header.rp (249.0 KB)

#4

I demonstrated 4 different methods in my previous post. I’ll choose one of those and apply to your file, but the steps are the same:

  1. I selected the “Deposit_banking menu” dynamic panel (dp) and created another dp from it. I named it “menu mask”
  2. I dragged right edge of “menu mask” to align with right edge of the main content. This creates specific dimensions for this dp and unchecked the “Fit to Content” option.
  3. I created a new interaction for “menu mask” using the Dragged event with a Move action, It moves “Deposit_banking menu” with dragX. Under “More Options” I created two boundaries, “left” and “right” to prevent moving that dp too far.
  4. For good measure, I created some custom “mask edge gradients” and placed them in the “menu mask” dp in front of “Deposit_banking menu” so that user can see there is more to the carousel list. These are just rectangle widgets with gradient fills: “gradient_left” and “gradient_right”. See the Moved event of “Deposit_banking menu” to see how the cases are set up. Pay attention to the “If” and “Else If” for each condition. (This is of course just one way to show that a menu/carousel can be swiped/dragged to see more items. You could show scrollbars and/or create your own custom scrollbar; you could show/hide arrowheads to left and right of menu, etc.)

slide header.rp (255.6 KB)

#5

Thank you so much @mbc66. It’s a great thing to learn from you.

closed #6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.