Framer Classic » Paging » Basic use

Basic use

You create an instance of the PageComponent with the new keyword, decide on its size, and add the layers that will become pages.

Here’s an example:

# creating the PageComponent
page = new PageComponent
    width: 375, height: 667
    point: Align.center
    borderColor: "gray", borderWidth: 1
    scrollVertical: no

Just as with the ScrollComponent, you can restrict the scrolling direction. Here I disabled vertical scrolling.

We can now add pages to page (the name of our PageComponent) by setting page.content as their parent.

# adding 4 pages
page1 = new Layer
    width: page.width, height: page.height
    backgroundColor: cycler()
    parent: page.content

page2 = new Layer
    width: page.width, height: page.height
    backgroundColor: cycler()
    parent: page.content
    x: page.width
...
Open in Framer

Here I gave the layers the same size as the PageComponent and used page.width to place the second layer right next to the first one (and did the same for consecutive layers).

Bonus: I also used 🛠 Cycle to create a function that returns a different color every time it’s called.

A basic PageComponent with four pages
A PageComponent with four pages

Leave a Reply