Scroll groups are a special kind of group for creating scrolling areas in your prototype. When you create a scroll group, it will be clipped to the boundaries of its screen, any content extending outside the scroll group can be scrolled to.

Scroll groups have an outer frame which can be resized to represent the size of the scrollable area. The inner content frame which appears as dotted line, can be resized to represent the size of the content inside the scroll area. Generally the content frame is the size of the content, but it can be extended to add padding around the scrollable content, or made smaller to allow for some content that extends beyond the scrollable region.

Ways to create a scroll group

First, select one or more layers, then do one of the following:

  • Click the “Scroll Group” button in the toolbar.
  • Choose “Create Scroll Group” from the contextual layer menu.
  • Choose Layer > Create Scroll Group from the menu bar.
  • Use the command option g keyboard shortcut.

Alternatively, you can select an existing group, then click either the horizontal or the vertical checkbox in the scroll section of the inspector.

Sync the scroll position of two scroll groups across a transition

If you have a transition between two very similar screens, you might want to maintain the scroll position of a scroll group that appears on both. To do this, simply connect the two scroll groups in the Transition Designer for that transition. You can learn how to connect layers in the connect layers help document.

Animate based on scroll position

Scroll-based animation is done using behaviors. Inside a behavior you can assign a scroll gesture to a scroll group and use it to transition to another state of your behavior.

Using scroll gestures