Framer.jsのスクロールアップに基づくアクション

Question

私はデザイナーであり、Framerを非常に新しくしています。

IDは、下のコンテンツがスクロールされる方向に基づいて画面の上部でナビゲーションを表示/非表示できるようにしています。私がページを下にスクロールし始めると、navは上に移動して隠れます。そして反対です。

ここで私は周りを遊んできましたが、これまで運がありませんでした。

scroll.on Events.Scroll、 - > scroll.scroll> scroll.scrollY場合、psd.subHead.animate プロパティ： Y：-50

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

私は私が上に移動するとしますスクロール位置が現在の位置よりも小さい場合はスクロールし、スクロール位置が大きい場合はスクロールします。

ご協力いただきありがとうございます。

Answer 1

ScrollComponentレイヤーにdirectionプロパティがあります。

scroll.direction

現在のスクロール方向：ドキュメントから。 「上」「下」「左」「右」を返します。 スクロール方向はドラッグの方向の逆です。 アクション：下方向にドラッグすると、効果的に上にスクロールします。 このプロパティは読み取り専用です。

以下は、開始するためのコード例です。 scroll.directionの使用方法は、一番下にあります。

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