How do I set up a Scroll View?

When setting up a scroll in your prototype, applying the Scroll interaction to a layer isn't going to cut it. The scroll view is a little more involved.

Scroll interactions are different than Move animations. Scroll should be added to a layer that sits over your content. Think of this layer as the actual screen on the device. When scrolling through content in an app, you're not moving the content, you're actually moving your view (or the screen) up and down the content. This is why adding a scroll to a content layer doesn't do anything.

Here are the steps for building a Scroll View into your app:

1. Create a layer and name it something like "Scroll View"

2. Scale the "Scroll View" layer to be the same dimensions as your device

3. Change the fill color to transparent

4. Drag and drop the Scroll interaction to the "Scroll View" layer (it's easiest to drop it on the layer in the list, in the upper left hand corner)

5. Now add another layer and name it "Content"

6. Make the "Content" layer as long as you want. In order for the scroll to work, the content layer needs to be bigger than the Scroll View.

7. Drag the "Content" layer onto the "Scroll View" layer, to make it a child of "Scroll View"

Now test it out on your device. You should be able to scroll up and down and see the ends of the "Content" layer at the top and bottom. You can also upload an asset to use for the content. Having something with words or images will make the scroll movement more apparent.

Here's an example of how the scrollview should act in your preview:

Feedback and Knowledge Base