Scroll Away

Lukas Guschlbauer

Open in Framer X


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


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.


  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:


  • 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



  • Updated to new Framer API


  • Updated setup video link


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


  • Updated setup video link


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


  • Added setup video link


  • Added temporary setup instructions
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

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