Framer Cheat Sheet: Scroll Components

This cheat sheet is for users just getting into Framer, as well as a reference for more experienced users. The scroll component allows you to scroll through content in any direction. Learn to make contact lists, single page websites and more.

Tess Gadd
Designing Humans
7 min readMay 3, 2017

--

In my last Cheat Sheet we explored Page Components, and now it is time to graduate to Scroll Components, Ladies and Gentelmen.

Like the other Cheat Sheets in this series, we will look at the very basics, simple properties and commonly used patterns. This was written for people like me — who aren’t so great at writing code, but are pretty darn good at copy and pasting. If you don’t have Framer yet, download a free 2 week trial.

In this Framer JS Cheat sheet, we will look at the following:

  1. What is a scroll component
  2. Creating basic scroll component
  3. Scroll settings
  4. Scroll to point or layer
  5. Events and listeners
  6. Common interaction examples using scroll

1. What is a scroll component

A scroll component allows you to, well, scroll. Using your settings correctly, you can make it scroll in any direction you want.

2. Creating a basic scroll component

All you have to do to create a scrolling section in your prototype is to make a scroll component and then give it some content to scroll through.

  1. First create a ScrollComponent

2. Then give it.content Your content could be anything you want really, from an image layer, to text or maybe a list of layers like in a contacts list…Have look at Loops & Arrays on how create something like this.

2. Scroll Settings

High Five! You’ve done it! To make your scroll content behave sensibly, you can give it the following properties.

Direction

By default, a ScrollComponent’s .content will be draggable in any direction (by default) and you’ll have a sort of “Google Maps” panning effect. If that’s not what you’re after, use the following boolean (true or false) properties to fix the scroll direction.

Overdrag

.overdrag is when you can drag the scroll’s content too far. You can see that the example on the left (Framer default) allows you to drag the content down further than the boundary. The example on the right allows for no .overdrag.

Bounce

When you overdrag, a “bounce” brings your content back to the original position. In the below example, the left one has a bounce (default) and the right doesn’t.

Content Inset

Like padding in CSS, you can use content inset to make all your content sit within certain boundaries. I mean,

“The key to any healthy relationship is boundaries” — my mom.

Speed

Scrolling speed allows you to speed up or slow down the scroll animation. You can change it to values between 0 and 1. The default is 1. In the example below, the scroll on the left is set at 1 and the one on the right is set to 0.2

Side note: If someone slowed down the way I scroll, I would probably inflict some serious emotional damage onto them.

To change speed on horizontal scroll:

Disable scroll

Let’s say you wanted a modal dialog or something similar to appear but you also need to disable the scroll in the background, you can use a boolean (true or false statement).

And, when you want the scroll to work again, you can just mark it as true.

Scrolling with mouse wheel

By default the mouse wheel is disabled — I agree, this is stupid, but alas, I don’t make the rules.

You can however, break the rules (in the most geek-ish way possible) and make it active by doing the following.

Propagate Event

You might be designing a scroll component, within a scroll component (oooh scroll-inception!). Sounds easy enough, but be aware that the inner scroll component will scroll along with its content. In the example (below left), the propagate is set to true (default), while the example on the right is set to false.

4. Scrolling to a axis or layer

Like single page websites that use anchors, scroll components let you scroll to a certain layer or scroll position, which can help navigate around your prototype.

Scroll to a point on an axis

The below example allows you to scroll to a specific position on an axis without animation. This is cool if you want to quickly navigate down a page. It does however cause disorientation for the user.

Also try:

Scroll to a point with animation

This allows you to scroll to a specific point on with an animation. This may cause a bit of “sea sickness” for your user, but they won’t feel disorientated.

Scroll to a layer

Using the below, you can tell your scroll component to scroll to a specific layer.

You can even add a bit of animation to the scroll.

You can also make it scroll to the closest layer:

The (0,0) in the above example means that it will scroll to the top left. If you use (0, 1) it will scroll to the bottom left and (0.5,0.5) will scroll to the center.

5. Event’s and listeners

.onScroll

If you want something to update or change while you scroll, you can use the .onScroll event.

You can also us .onMove instead of .onScroll.

Scroll in a direction

If you only want to make an event happen when you scroll in a certain direction, you can use .content.on "change:y", -> or .content.on "change:x", ->

Scroll start and end

If you want something to appear when you start scrolling and disappear when you finish — use scroll start and end. Notice how the “ReadOut” only appears when the users is actually scrolling — an not just when the content is moving.

6. Some interactions using scroll

1. Creating stick headers on scroll

Sticky headers can be nice when scrolling through a contacts list (see Jonas Treub’s prototype), or parts of a website.

Try out this example: https://framer.cloud/MWsrt/

2. Animating Header on scroll direction

Ever noticed how some websites or apps’ nav bars get smaller on scroll down and bigger when you scroll up. This is a useful way to save screen real estate and lessen cognitive load.

Try out this example: https://framer.cloud/LEnrA/

3. Creating animations using scroll and utils.modulate

Using utils.modulate you can make layers change as you scroll. This is can add a bit of flare to your design.

Try out this example: https://framer.cloud/Lepse/

4. Scroll with a slider

In this example, we make a scroll and a slider component react to each other as their y position / value changes.

Try out this example here: https://framer.cloud/zdnvn

Look how fancy we are! Hopefully this cheat sheet helped you, and if it didn’t or you want to learn more about something else, please leave me comment, and I will update :)

--

--