Scroll gestures can be used to create animations that are controlled by the scroll position of a scroll group. Scroll gestures are available in the behavior designer.

First you’ll want to create a [scroll group](../scrolling/create-a-scroll-group.html), create a group around the scroll group, also containing any other layers that you want to animate based on scroll position. Add a behavior to the group surrounding the scroll group.

Create a scroll gesture

Keep in mind that scroll gestures are a link from one state to another. You won’t see the scroll position change in the Behavior Designer, but you will define a range to scroll through, and a target state.

  • Set up one state how you would like it to appear and the end of the scroll-based animation.
  • Select the scroll group on the initial state
  • Create a link from that group, to the other state, be sure to choose “Scroll” as the gesture type
  • In the inspector, enter a start and end value. This defines the distance over which the animation will happen while scrolling

Scroll gestures automatically cause the reverse scroll gesture to be created invisibly on the target state. It is not necessary to create a scroll gesture going back in the other direction as with other gesture types.