This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Benny Chew
Posted Jul 30 - Read on Facebook

I just started learning framer.js a couple days ago and I like it. Now I'm trying to make a basic iPhone proto list scrolling. Any tips how to implement a scroll of a long list? I've tried layer.scroll = true, but that didn't work. I also tried Events.DragStart / DragMove / DragEnd, this worked but I don't know how to implement 'inertia'. I tried to perform a scroll contraint with an if else check in DragMove but that didn't work... So what is the best way for scrolling things?

11 Comments

Daniël van der Winden

layer.scroll should work. Remember that you don't have to drag your mouse, but just scroll it. I made that mistake last week, haha.

Benny Chew

Thanks Daniël I will give it another try!

Benny Chew

I got layer.scroll = true to work, but it only worked with a parent layer, not a child layer. I have a list which is in a parent (screen) which masks every child to 640 x 1136.

Ying Ying Liu

I also just started learning framer, and ran into this same issue. for some reason, layer.scroll = true is not working. maybe i'm missing something obvious? i'm also js newb. thanks in advance! app.js code here: http://codepen.io/yying6/pen/qDcEi

Min-Sang Choi

Ying Ying Liu I heard layers can scroll their contents. try this.
container = new Layer ({
x:0,
y:0,
width:300,
height:280
})

layerA = new Layer ({
x:0,
y:0,
width: 300,
height: 300,
// set image into layer
image: "http://lorempixel.com/output/city-q-c-500-500-9.jpg"
})

container.addSubLayer(layerA)
container.scroll = true

Ying Ying Liu

Ahhhh I understand. Thanks Min-Sang Choi!!

Koen Bok

Yes, To recap: create a layer with a bigger layer as it's sublayer and set scroll to true.

Jason Brewer

I'm having the exact same problem. I'm trying to understand the layer.scroll logic. In the Learn>Basics section

http://framerjs.com/learn.html#basics "

# make your layer scrollable"

it's hard to follow. It looks like this should work but it doesn't. even if I copy the code from that section and replace the img - it still doesn't work.

If I have:

imageLayer1 = new Layer
x:0, y:0, width:640, height:2296, image:"images/feed.png"

imageLayer1.scroll = true

why doesn't that work?

I know this is an old thread. I wanted to post here before the main feed.

THANKS!!!!!

Min-Sang Choi

Jason, you should make a new layer(smaller than your imageLayer). and add imageLayer1 as it's sublayer. then make new layer scrollable. here's the code.

container = new Layer x:0, y:0, width:640, height:1136
imageLayer1 = new Layer
x:0, y:0, width:640, height:2296, image:"images/feed.png"

container.addSubLayer(imageLayer1)
container.scroll = true

Collin

This is wonderful! Was having the same issue. Was trying to use draggable. Thanks number 2 Min-Sang Choi

Jason Brewer

Got it. Thank you!

Read the entire post on Facebook