Scroll Away

Lukas Guschlbauer

Overview

Scroll Away hides design elements on scrolling down and let’s them reappear on scrolling up.

Setup

This package comes with to code overrides, that you need to use this package. To make them available for these easy steps:

  1. Install this package.
  2. Select a Frame on the canvas, and create a new code override file. By default, the file is called App.tsx - don’t change that!
  3. Now you should see „getScrollData” and „useScrollData“ available in your code overrides panel! You’re done! 🎉

Now you can follow the steps below to get it to work.

Usage

  1. Drag the component onto the canvas.
  2. Connect to the Frame you want to use as content.
  3. Apply code override „getScrollData“ to the scroll-component.
  4. Apply code override „useScrollData“ to the ScrollAway-component.
  5. You did it again! 👏

Now you can go ahead and adjust the settings of the ScrollAway-component to your needs.

Here’s a video of the whole setup process: https://twitter.com/derlukasg/status/1113162191493103620

Settings

  • Offset — Controls the vertical offset before element is first hidden

  • Tolerance — Controls the tolerance on scrolldirection-change before the element is shown/hidden

  • Alignment — Controls the position of the connected frame inside the ScrollAway component.

  • Effect — Controls the animation the element is shown/hidden. Your options are:

    • Move — Moves the element in the selected direction [↑ ↓ ← →]
    • Fade — Fades the element out
    • Fade Move — Fades & Moves the element out
    • Zoom — Scales the element out
  • Easing — Gives you a preset of the standard transitions [“linear“, “easeIn“, “easeOut“, “easeInOut“, “circIn“, “circOut“, “circInOut“, “backIn“, “backOut“, “backInOut“, “anticipate”]

  • Timing — The transition-speed in milliseconds

Changelog

V1.8.0

  • Updated to new Framer API

V1.7.0

  • Updated setup video link

V1.6.0

  • Managed to get the code overrides into the package - no more stupid setup anymore! 🙃

V1.5.0

  • Updated setup video link

V1.4.0

  • Removed unneccessary override - now both scrollComponent & scrollAway component get the same override applied

V1.3.0

  • Added setup video link

V1.2.0

  • Added temporary setup instructions

Info

  • Version: 1.8.0
  • Updated: 4 months ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree