Back To Videos

Scrollable Layers

Tutorial length - 1:20 minutes

Step-by-step

Scroll interactions are common in mobile apps. Learn the basics of creating native scroll views with Pixate.

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

Create Content Layer

  • Create a layer with these specifications.
  • Rename the layer to Content.

Create Scroll View Layer

  • Create a layer with these specifications.
  • Rename the layer to Scroll view.

Nest Content & Apply Scroll

  • Drag and drop the Content layer onto the Scroll view layer.
  • Apply a Scroll interaction to the Scroll view layer.

Test it out

    The green content is scrolled up and down with scroll bounce.

    Scroll bounce is native to iOS only. You will not see scroll bounce on Android devices.

Resize Scroll View

  • Changing the size of the Scroll view layer will change the size of the scroll area.

Resize Content

  • Changing the size of the Content layer will allow you to scroll to the parts of the layer outside of the scroll view, vertical and horizontal.