Action based on scrolling up or down in Framer.js

Question

I'm a designer and very new to Framer.

Id like to be able to hide/show the navigation at the top of screen based on the direction the content below is scrolled. If I start to scroll down the page, the nav hides by moving up. And then the opposite.

Here's what I've been playing around with, but no luck so far.

scroll.on Events.Scroll, -> if scroll.scroll > scroll.scrollY then psd.subHead.animate properties: y: -50

else scroll.scroll < scroll.scrollY then psd.subHead.animate
    properties:
        y: 0

I suppose I want to move up if scroll position is less than the current position and down if it's greater.

Any help is much appreciated!

Answer 1

The ScrollComponent layer has a direction property. From the docs:

scroll.direction

Current scrolling direction. Returns "up", "down", "left", or "right". The scrolling direction is the inverse of the direction of the drag action: when dragging downwards, you're effectively scrolling upwards. This property is read-only.

Below is some example code to get you started. You can find the scroll.direction usage near the bottom.

Framer.Defaults.Animation = time: 0.3

scroll = new ScrollComponent
    width: Screen.width
    height: Screen.height
    scrollHorizontal: false
    backgroundColor: "blue"
    contentInset:
        top: 10
        bottom: 10
    borderRadius: 8

for i in [0..10]
    layerA = new Layer
        width: Screen.width - 20, height: 150
        x: 10, y: 160 * i 
        backgroundColor: "#fff"
        superLayer: scroll.content
        borderRadius: 4

navBar = new Layer
    x: 0
    y: 0
    width: Screen.width
    height: 130
    borderRadius: 8
    backgroundColor: "red"

scroll.on Events.Scroll, -> 
    if scroll.direction == "up"
        navBar.animate 
            properties: 
                y: 0
    if scroll.direction == "down"
        navBar.animate
            properties:
                y: -130