Events » Scroll events

Scroll events

These are the events emitted by a ScrollComponent.

Basic scroll events

There are onScrollStart and onScrollEnd to signal the beginning and end of a scroll action, and between these two, onScroll will be called continuously.

Basic scroll events
onScrollStartScrolling started.
onScroll 🔃While scrolling.
onScrollEndScrolling ended.

Here’s a simple prototype that prints text in the console when these events are called:

scroll.onScrollStart ->
    print "Scroll started."
scroll.onScroll ->
    print "Scrolling # points."
scroll.onScrollEnd ->
    print "Scroll ended."
Download Framer project

Scroll animation events

The content doesn’t stop moving when the user stops scrolling.

Instead, it will keep scrolling for a moment depending on how much velocity it received from the user‘s swipe (‘momentum’), or it might bounce back because it was dragged over the threshold (‘bounce’).

Scroll animation events
onScrollAnimationDidStartStart of momentum or bounce animation.
onScrollAnimationDidEndEnd of momentum or bounce animation.

The onScrollAnimationDidStart event triggers immediately after onScrollEnd to signal when these animations started.

onScrollAnimationDidEnd will trigger when the layer came to a complete standstill.

A simple example:

scroll.onScrollAnimationDidStart ->
    print "Momentum or bounce animation started."
scroll.onScrollAnimationDidEnd ->
    print "The scrolled content stopped completely."
Download Framer project

Is something moving?

The onMove event will fire whenever the content moves, including when it is because of a momentum or bounce animation.

Move event
onMove 🔃The content is moving (includes momentum or bounce animation).

An example:

scroll.onMove ->
    print "Content moved # points."
Download Framer project

Example uses

A typical use of the scrolling events is to have a navigation bar move or disappear when the content scrolls up.

First example: Moving a navigation bar

Here the navigation bar will follow the content when it has scrolled more than 44 points (the height of the nav bar) upward.

# move the nav bar up together with the content
scroll.onMove ->
    if scroll.scrollY > 44
        navigationBar.y = scroll.content.y - 16
        navigationBar.y = 20
Download Framer project

Note that we look at scroll.scrollY to see how far we scrolled, but use scroll.content.y to set the position of the nav bar.

Pro tip: Two kinds of properties give the scrolling distance, one kind goes up, the other kind counts down.

  1. scroll.scrollY and scroll.scrollX
    How far did we scroll? (Starts at zero and increases.)
  2. scroll.content.y and scroll.content.x
    Where’s the content now? (Starts at zero and decreases.)
The navigation bar moves up together with the content

Second example: Fading out a navigation bar

With 🛠 Modulate you can convert one value to something else.

Here we map any value of scroll.scrollY between 0 and 44 to a new value for navigationBar.opacity between 1 and 0.

When the scroll distance is 0, the opacity of the navigation bar will be set to 1. When the scroll distance is 44, that opacity will be set to 0. All other values will be mapped between these two.

# fade out the nav bar when the content moves up
scroll.onMove ->
    navigationBar.opacity = Utils.modulate scroll.scrollY, [0, 44], [1, 0]
Download Framer project
The navigation bar disappears when scrolling up

Overview of the scroll events

All the scrolling events
Download Framer project