Back To Videos

Animations Based on Scroll Position

Tutorial length - 2:33 minutes

Step-by-step

Learn how to animate layers based on the scroll position of a scrollable view. In this guide, we'll walk through a quick demo where we create a sticky navigation bar.

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

Create Scroll View

  • Create a new layer, rename it to Scroll view, resize it to fit the screen and make the fill transparent.
  • Apply the Scroll interaction to this layer.

Create Content

  • Create a layer with these specifications and rename it to Content.
  • Drag this layer onto the Scroll view layer to nest it.

Create Nav

  • Create a layer with these specifications and rename it to Nav.

Test it out

    The content scrolls behind the nav. This is because the nav is not nested in the scroll view.

Animate Nav

  • Apply a Move animation to the Nav layer.
  • Set the Based On options to Scroll view and Scroll Position.
  • Set Animates to Continuously with rate.
  • Check Limit Scroll Range and enter the values to the left.
  • Enter -1 for the Rate property.
    The use of a negative rate is best explained in the video.

Test it out

    The nav now hides when the content is scrolled up and shows when the top of the content is reached.