Back To Videos

Scrolling with Paging

Tutorial length - 1:07 minutes

Step-by-step

In a scrollable area, paging restricts scroll movement to a single screens worth of content at a time. Check out how to set this up in Pixate.

All size, position and conditional values used are specific to a prototype designed for an iPhone 5.

Create Pages

  • Create three layers with these specifications. Duplicate can be used.
  • Rename the layers and place them one after another, to the right.

Create Scroll View & Nest Pages

  • Create a layer the same size as the screen, set the fill color to Transparent, rename it and apply a Scroll interaction.
  • Drag and drop each Page layer onto the Scroll view.

Test it out

    Scroll side to side to see that the scroll works.

Enable Paging

  • Change the Scroll view layer's Paging Mode property to paging.

Test it out

    Scrolling side to side will now snap the view to the pages.

    In order for this to work correctly, all of the pages must be the same size.