Scroll & Paging Use Cases

Discover how to use scroll and paging for common use cases. Learn how to make vertical and horizontal scroll views for mobile and desktop apps. Understand how to set up scroll properties correctly, and which triggers and responses to use for scroll-related interactions.

Try the prototypes yourself and download them to see the interactions. Moreover, check out our tutorials to see how each prototype was made step by step.

Find the use case you need.

• Browsing through a social media app
• Vertical scroll in a messaging app
• Looping scroll carousel
• Wheel picker
• Scrolling & paging from the middle
• Infinite paging scroll

Browsing Through a Social Media app

Like most social media apps function these days, you can make a horizontal and vertical scroll to browse through different profiles and photos. Learn how to add margins to the scroll views to maintain a similar UI (spaces at the end of the scroll) as in your apps.

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Vertical Scroll in a Messaging App

Scroll up and down to see messages in a messaging app or email inbox. Create a scroll container and learn how to set a custom starting scroll position (for example, from the bottom).

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Looping Scroll Carousel

As in online shopping websites or a gallery of images on video streaming platforms, you can create a slideshow. Learn how to use the paging container to make a carousel view and how to use variables to alternate image names while scrolling.

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Wheel Picker

Make your own wheel picker to pick a date, time, etc. A wheel picker allows you to scroll up and down through multiple choices very quickly. It is useful especially when the list of options cannot be fully displayed because they may exceed the available space on your screen.

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Scrolling & paging from the middle

Allow your pages to scroll from the middle to both left and right. Learn how to set up the right container property to make it happen.

Try the prototype yourself.

Learn how to create this prototype step-by-step.

Infinite Paging Scroll

Make your pages scroll infinitely in both directions. Learn how to group pages using a paging container and to use the range trigger to enable the infinite scroll.

Try the prototype yourself.

Learn how to create this prototype step-by-step.