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.

Published in

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:

What is a scroll component
Creating basic scroll component
Scroll settings
Scroll to point or layer
Events and listeners
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.

First create a ScrollComponent

ScrollComp = new 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.

ScrollComp = new ScrollComponentlayer = new Layer
   parent: ScrollComp.content

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.

# Allows for only Horizontal scrolling
scrollComp = new ScrollComponent
   scrollVertical: false# Allows for only Vertical scrolling
scrollComp = new ScrollComponent
   scrollHorizontal: false

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.

#Example on the rightScrollComp.content.draggable.overdrag = false

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.

#To remove bouncescrollComp.content.draggable.bounce = false

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.

scrollComp.contentInset =
    top: 20
    right: 0
    bottom: 20
    left: 0

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.

# Example on left
speedY: 1# Example on right
speedY: 0.2

To change speed on horizontal scroll:

speedX: 1

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.

#disable scroll
myScroll.scroll = false#enable scroll
myScroll.scroll = 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.

scrollComp.mouseWheelEnabled = true

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.

#Example on the rightscrollComp1 = new ScrollComponent
   size: 250
   backgroundColor: "#DD93D9"
 
scrollComp2 = new ScrollComponent
   width: scrollComp1.width - 50
   height: scrollComp1.height - 50
   x: 25
   y: 25
   parent: scrollComp1.content
   backgroundColor: "#DD93D9"
   brightness: 80
 
box = new Layer
   width: scrollComp1.width - 100
   height: scrollComp1.height - 100
   x: 25
   y: 25
   parent: scrollComp2.content
   backgroundColor: "#DD93D9"
   brightness: 50
 
box.draggable.propagateEvents = 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.

bttn.onClick ->
   scrollComp.scrollY = 250

Also try:

scrollComp.scrollX = 250

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.

scrollComp.scrollToPoint(
    x: 250, y: 0
    true
    curve: Bezier.ease, time: 10
)

Scroll to a layer

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

scrollComp.scrollToLayer(layerName)

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

scrollComp.scrollToLayer(
    layerName
    0.5, 0
    true
    time: 2
    )

You can also make it scroll to the closest layer:

scrollComp = new ScrollComponentlayer = new Layer
   x: 50
   y: 50
   parent: scrollComp.contentscrollComp.scrollToClosestLayer(0, 0)

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.

scrollComp = new ScrollComponentReadOut = new TextLayer
   text: "0"scrollComp.onScroll ->
  ReadOut.text = scrollComp.content.y

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", ->

scrollComp = new ScrollComponentReadOut = new TextLayer
   text: ""scrollComp.content.on "change:y", ->
  ReadOut.text = "Vertical"scrollComp.content.on "change:x", ->
  ReadOut.text = "Horizontal"

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.

scrollComp = new ScrollComponentReadOut = new TextLayer
   text: "scrolling"
   visible: falsescrollComp.onScrollStart ->
   ReadOut.visible = truescrollComp.onScrollEnd ->
   ReadOut.visible = false

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 :)