Events » Paging events

Paging events

The PageComponent has almost the same events as the ScrollComponent, plus a page change event.

Paging events
onScrollStartScrolling started
onScroll 🔃While scrolling
onScrollEndScrolling ended
onAnimationStartStart of momentum or bounce animation (use on content)
onAnimationEndEnd of momentum or bounce animation (use on content)
onMove 🔃The content is moving (includes momentum or bounce animation)
"change:currentPage"The component just snapped to a page

onScrollAnimationDidStart and onScrollAnimationDidEnd don’t work on a PageComponent, but we can listen to the animation events of the content layer.

Using the page change event

When working with "change:currentPage", two PageComponent properties will come in handy:

  • currentPage contains the currently visible page
  • previousPage holds the page that just scrolled off screen

In this example, the current page is set to full opacity (on every page change) while the previous page is faded out:

# Listen to page switches
page.on "change:currentPage", ->
    # current page: full opacity
        opacity: 1
            time: 0.4
    # previous page: half opacity
        opacity: 0.5
            time: 0.4
Download Framer project
The current page animates to full opacity

(In the project, I gave the pages an opacity of 0.5 when creating them.)

Current page index

Say you’re using page indicators (the small dots at the bottom of the page denoting the total number of pages). You’ll want to know which page is visible at a given time in order to highlight the correct indicator.

The currentPage property doesn’t give you the ordinal number of the current page, but you can get it with one more line of code.

You can pass a layer object to horizontalPageIndex() to look up the index of that page. (For vertically stacked pages: use verticalPageIndex().)

An example. First, we create the indicators. We can do it in the same loop that we use to make the pages.

    # indicator for every page
    indicator = new Layer
        size: 12, borderRadius: "50%"
        backgroundColor: "white"
        y: 630
        x: 98 + (index * 24)
        opacity: 0.2
        parent: page
    # add indicator to array
    allIndicators.push indicator

The indicators have an opacity of 0.2 and we use index to place each dot 24 points farther to the right.

Note that they have page as their parent (and not page.content), so they’ll stay in the same position.

The indicators were added to an allIndicators array, so the first indicator in the array will have an index of 0. We can already give this one full opacity, since the first page will be visible at the start.

# set indicator for the first page
allIndicators[0].opacity = 1

Now we listen to "change:currentPage" to set the correct indicator after every page change:

# update indicators on page change
page.on "change:currentPage", ->
    # reset all
    for indicator in allIndicators
        indicator.opacity = 0.2
    # set full opacity for active page
    current = page.horizontalPageIndex page.currentPage
    allIndicators[current].opacity = 1
Download Framer project

In the code above we give all the indicators an opacity of 0.2, to have a clean slate.

We then get the horizontal page index by passing page.currentPage into page.horizontalPageIndex(), and use the result (current) to set the opacity of the indicator in question in the allIndicators array.

PageComponent with page indicators

Overview of the paging events

PageComponents have scrolling events + a page change event
Download Framer project