Sometimes we want scrolling to be paginated, or in a carousel. We are going to build this Facebook Events prototype, with paginated scrolling, building upon what we’ve learnt in the Scrolling Views. Make sure you download the tutorial files to follow along.
If you’re starting from the tutorial files, you should see that we have our assets in place. We have five cards for our carousel, each the same width, and each the same distance from each other at
10 points. They are placed in a Group that is the width of all the cards in line, with the usual
10 points padding at the start and end.
We add scroll like any other interaction — by hovering over the layer, clicking on Touch, and then clicking on a Scroll option. We want horizontal scrolling, so select Scroll X.
For any full-width paging scrolling, this would be fine. But because our cards are actually smaller than the width of the screen, we need to tell the Scroll exactly how big one of these cards, or pages, is.
There’s a ton of settings here, and we don’t usually need to use them all. Start by changing the Page Size input to have a width of
275 — the same as an individual card.
Change the Padding to a width of
10 — the same as the padding between each of the cards. We are not changing the height from
0 because vertical scrolling is not applicable in this prototype.
Now when we Scroll, our cards take up one swipe or scroll movement. The first and last are aligned to the sides, and the middle ones are centered.
Android is a little more rigid than these animation inputs. We can change Rubber Band Tension to something like
440, and the Rubber Band Friction to
Clipping the scroll
Scrolling in Origami has the ‘rubber banding’ effect by default. This is what you see in many use cases of scrolling, and almost everywhere in iOS. This is an Android prototype however, so we do not want this over-drag at the start and end of the Scroll.
Double-click on the Patch Editor ⌘⏎ and type to find Clip. Press Return ⏎. We know our H-Scroll Position X start value is
0. Scrolling to the last card should show a value of
Our Clip patch Max input should be
0, since that is the larger of the values. Our last card is, again, at
-1075. Because that is a negative number and therefore less that
-1075 the value of the Clip Min input.
Once this is done, try scrolling once again. As soon as we get to the start and end of our H-Scroll Group, it becomes clipped within the two values.