0

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!

Luis Escobar
  • 3
  • 1
  • 2

1 Answers1

0

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
vievievie
  • 328
  • 3
  • 10
  • This is great! Thanks so much. Just out of curiosity, what is "for i in [0..10]" for? And do you recommend any sites where I can find tutorials. I've pretty much watched the few that are on Framer. Mostly I find people showing off their projects, but not explaining. Thanks again! – Luis Escobar Sep 29 '16 at 12:33
  • Never mind, I got it. For Index - you created 10 of those panels. Hadn't realized until I opened your example. Thanks! – Luis Escobar Sep 29 '16 at 12:53
  • Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted. – vievievie Sep 30 '16 at 05:29
  • Hey @kazzyt, did you happen to see the other post I create about pushing pinned elements? I wasn't sure if I could call you out with @ in a post you hadn't commented on. Any help would be really appreciated. – Luis Escobar Sep 30 '16 at 20:33