How to Create a Horizontal Scrolling Effect

In our previous video, I demonstrated how to create a vertical scrolling effect. Let’s do the opposite and create a horizontal scrolling effect. Yes, you guessed correctly, you saw this one coming, didn’t you?

Flipping a switch is all it takes to create horizontal scrolling, very similar to how vertical scrolling was created.

I will deselect my artwork and click on the item I would like to make into a horizontal effect. In the first image, you will notice that there is nothing there. For this to work, I must group my images so that the prototype is treated as one element for the horizontal scroll.

Using repeat grids is the easiest way to do that. Once I have selected my image, I will enable the repeat grid. As soon as the green bubble appears, I drag this to the right. I also want some padding at the end when I have the desired number of images, so I will drag this to the next start of the image here. My default gutter spacing is 20 pixels, so I will place my mouse between the two images, and the gutter changes to pink. After I see the double arrow, I can make the needed adjustment to the gutter spacing to 35 pixels. To increase spacing, move to the right, to reduce spacing, move to the left.

Because my image has rounded corners, I still want to keep the special effect on the picture box. Yes, there is a keyboard shortcut, but if you use it your rounded corner image will become a square box, which is why I don’t use it! To enable horizontal scrolling, I’ll click the scroll group or the icon with the left and right arrows on the right-hand side of the screen.

Now let’s put this to the test. You can see your prototype in action by clicking on the play button in the top right corner. Take your mouse and scroll to the right or left to go back. There you have it, you have created a horizontal scrolling effect for your prototype.

Fixing the Design Flaw

But there’s a flaw in the design! Is anybody able to tell there is a scroll effect here?

Maybe a hint that there is a scroll here when designing something with a horizontal scroll? In the case of too wide gutter spacing, a user might not notice the scroll bar. Here, I’m going to reduce the gutter spacing by a pixel or two to illustrate the scrolling effect and show a little bit of the next image. By placing my mouse between the two images, the gutter changes to pink, and once I see the double arrow, I can adjust the gutter spacing to the left by a pixel or two. The design is now complete.

We’ll put it to the test again. Now you can see the next image. Click on the play button in your prototype to see it in action. Take your mouse and scroll to the right or left to go back. There you go, you have created a horizontal scrolling effect for your prototype.