Paging » Setting the initial page

Setting the initial page

With snapToPage() you can decide which page should be visible when your prototype loads.

With the following line of code, the PageComponent will jump instantly to the eighth page:

# jump to the eighth page
page.snapToPage page.content.children[7], no
Download Framer project

The pages are children of the content layer, so I passed ‘child layer with index nr. 7’ to snapToPage().

The extra no argument makes it happen without animation.

A PageComponent with a different first page
Snapped to the eighth page (the flash is a ⌘R)

The snapToPage() function can take three arguments. The first argument is mandatory; the other two are optional:

  1. Which page to scroll to. (Has to be a layer object, using a number will not work.)
  2. Whether the transition should be animated. (Optional. yes by default)
  3. An animationOptions object for overriding the default animation settings. (Optional)

The following line will have the PageComponent animate to the eighth page over 5 seconds.

# scroll to the eighth page
page.snapToPage page.content.children[7], yes, animationOptions = time: 5
Download Framer project
Scrolling automatically to a certain page
Automatic scroll to the eighth page (reloaded using ⌘R)