Scrolling comes to Rive in the form of two new constraints; one to add touch-based scrolling to overflowed content, and another to create a scroll bar. Both constraints work in conjunction with the existing layout components. We plan to provide generalised scrolling components for quicker setup in future.
Scroll wheel/trackpad gestures aren’t currently supported but are on our v1 Roadmap.

​
Content Scrolling

To create a content scroll region, set up a hierarchy that includes:
  • Scroll view - the Layout that defines the area that is the scroll region
  • Scroll content - the Layout that contains the items to be scrolled (this is the Layout you will apply the Scroll Constraint to). The scroll amount will be determined by the size of this Layout. Typically you want to set this Layout to hug (or fixed)
  • Scroll items - the Layout items to be scrolled
Image Select your Scroll content Layout and use the add action within the constraint inspector to add a Scroll Content constraint. Image Once added, use the options fly-out to adjust the Scroll content properties. Image

​
Direction

Vertical - Only scrolls in the vertical direction Horizontal - Only scrolls in the horizontal direction All - Scrolls in both directions

​
Scroll Percent X/Y (Animatable)

This property allows you to set the percentage scroll of the content where 0% is scrolled to the top/left and 100% is scrolled to the bottom/right. This property works when the content is set to scroll in one or all directions and can be keyed on the timeline

​
Scroll Index (Animatable)

This property allows you to set the 0 based index of the Scroll item to scroll to. This only works when scroll is set to either Vertical or Horizontal and can be keyed on the timeline.
Scroll Percent and Scroll Index both control the offset within the Scroll content area. As such, you should only set one or the other because there will be contention when both are set at the same time. For example, you should only key one of these values on a given frame in your timeline.
In order to use Scroll Percent and Scroll Index together with physical scroll dragging, you should create an empty “reset” timeline/state which you should transition to as soon as the scroll area is interacted with. One way to do this is to add a Mouse down listener to the Scroll View.

​
Physics

Elastic - An iOS style scroll with deceleration and rubber banding at the edges Clamped - A basic drag and drop with no physics

​
Snap

When enabled, the scroll content will always settle with a whole item at the top/left of the scroll area. Once you have applied your desired properties, switch to animate mode and start playback of a State Machine to preview the applied scroll constraint. You should be able to click/drag/release within the Scroll view area to manually control the scroll.

​
List Scrolling

In order to scroll Lists, use the same setup as described above in Content Scrolling, but rather than adding multiple Scroll items to the Scroll content layout, you can add a single List. See Databinding Lists for more information. There are some additional properties that apply when scrolling Lists. These will only be enabled once a List has been added to the Scroll content.

​
Virtualize

When enabled, the List will only generate Artboard components for the items currently in the Content view area. This improves performance when scrolling lists containing a large number of items. Note that virtualization can only be applied in one direction (either vertical or horizontal, not both). When enabled, the List will scroll endlessly in either direction. In order to use Carousel mode, Virtualize must be enabled.

​
Creating a Scroll Bar

To create a content bar, set up a hierarchy that includes:
  • Scroll Bar - the Layout that defines the area that is the scroll bar and track
  • Scroll Thumb - the Layout that defines the draggable scroll thumb
Image To create a scroll bar, select a Layout Component acting as the scroll bar thumb. From the constraints inspector, add a Scroll Bar Thumb constraint. Image Use the target button within the options panel to connect a scrolling Layout. As described in the Scrolling Content section above, this should be the Layout that your Scroll Constraint was applied to. Image