framer js page components tutorial how-to

Framer JS Page Components Tutorial & How-To For Beginners

When Steve Jobs announced the iPhone in 2007 he wowed the crowd demoing scrolling. A simple gesture that felt magical back then. There is actually lots of physics and code behind scrolling and not so much magic. Today we take scrolling and swiping effects for granted. Like swiping left or right between screens to view more information.

READ: Framer JS Tutorial And Examples For Beginners

Framer JS Page Components

Framer JS supports paginated swipes and swiping with the PageComponent. According to the documentation:

“The PageComponent is based on the ScrollComponent, but designed for displaying paginated instead of continuous content. It supports content layers of different sizes, and can snap to layers based on location and scroll velocity”.

Think of your iPhone home screen. You swipe left to jump to a new screen on the right. You swipe right to go back to the first screen.

Framer JS Page Components Basics

There are 3 things to know about the PageComponent.

  1. The PageComponent
  2. The Content Area
  3. The Content Itself

The PageComponent initiates the process in Framer JS. It defines the touch area for swipes .

The content area is the area where the content exists. Every screen belongs here. Only a part of the content area is visible at a given time. One screen every swipe.

The content is the layers within the content area. This can be anything. A simple Framer JS layer, images, videos, HTML you name it.

Here’s how it looks when you put everything together.

Framer JS Page Components Tutorial & How-To for Beginners

There are two ways to create a PageComponent in Framer JS. Defining each layer separately or using a For loop. Let’s start with the For loop.

Framer JS Page Components Example – For Loop

First we create and define the page component properties. It covers the whole screen. The scrollVertical disables swipes up or down.

Page = new PageComponent
width: Screen.width, height: Screen.height, scrollVertical: false

Adding a background layer to make things more interesting.

bg = new BackgroundLayer
width: 808, height: 1134
image: “images/mountainbg.png”

This is where the real magic happens. A For loop creates the content. 8 layers with the same properties. This content belongs and “lives” inside the Page component. This is defined by the superLayer variable. Each of the 8 layers gets a random color with opacity 0.2.

for i in [0..7]
	Filters = new Layer
width: Screen.width
height: Screen.height
x: Screen.width * i
superLayer: Page.content
backgroundColor: Utils.randomColor(0.2)

The i is a variable. You can name it whatever you want. The number of the layers counts 0 as the first layer. 1 is the second layer and so on. The width and height of each layer equals the iPhone’s width and height. Which equals the width and height of the Page Component. This means that swipes work on full screen, not on a specific area.

Each layer x coordinate changes with the loop. First layer’s x equals 0. Second layer’s x equals 750 ( 750 * 1). Third layer’s x equals 1500 ( 750 * 2 ) etc.

In a nutshell here’s what happened.

  • A new Page Component was created that covers the full screen
  • A layer with an image was added to make things look beautiful
  • A For loop is used to create 8 layers, tell Framer JS that they belong inside the Page Component and assign them random colors

    You can see the Snapchat like prototype with color filters and for loop here.

    Framer JS Page Components Example – Manual Pages

    Adding each layer manually provides more control and freedom. The downside is a bit more code and complexity. I will use the same Snapchat like app example. This time three filters will be created. 2 color filters and 1 color and time filter.

    Again the first steps are the same. A Page Component is created and defined. A new background image is added to make things beautiful.

    Page = new PageComponent
    width: Screen.width, height: Screen.height, scrollVertical: false

    bg = new BackgroundLayer
    width: 808, height: 1134
    image: “images/mountainbg.png”

    Now it’s time to create the three layers and connect them with the Page Component.

    The first layer is named Filter1. Its width and height is the iPhone’s screen width and height. Background color and opacity are defined. Then the layer is assigned where to “live” using the superLayer variable. That is inside the Page Component.

    Filter1 = new Layer
    width: Screen.width, height: Screen.height, backgroundColor: “#50E3C2”, opacity: 0.2
    superLayer: Page.content

    The same goes for the second layer named Filter2. Same properties except for the backgroundColor.

    The third layer is a little different. This is an image layer created in Sketch. It’s a .PNG file with opacity 0.2. That’s it.

    Filter3 = new Layer
    width: Screen.width, height: Screen.height, image: “images/SnapTime.png”
    superLayer: Page.content

    Now it’s time to tell Framer JS where to place the content and in which order. That is inside the Page Component and on the right of the first layer.

    The Filter2 layer will be placed on the right of the Filter1 layer. The Filter3 layer will be placed on the right of the Filter2 layer.

    Page.addPage(Filter2, “right”)
    Page.addPage(Filter3, “right”)

    In a nutshell here’s what happened.

  • A new Page Component was created that covers the full screen
  • A layer with an image was added to make things look beautiful
  • Three layers were created. Two simple Framer JS layers and one image layer. Each layer belongs inside the Page Component and placed on the right of the first layer.