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

What is Framer? Join the Community
Return to index
Cyrus Cheng
Posted Mar 11 - Read on Facebook

Hi,it's me ...i found a problem,that when i import a artboard into framer like share blow link, in this case ,aa.list is a long picture,but the aa.list.scroll=true isn't work...anyone can tell me why?thanks very much...

19 Comments

Benjamin Den Boer

Hey Cyrus, could be a couple of things:

1. First, make sure to write "aa.list.scroll = true" - right now, you've capitalized scroll, like this: "aa.list.Scroll=true"

2. Also make sure that you content layer group is contained within a parent layer group.

3. The height of the content needs to exceed that of its parent, and the content must also be masked, either in Framer or in Sketch.

If you're still having trouble making it work, if you could send me the .Sketch file I'd be happy to send you back a working demo. :)

Cyrus Cheng

Benjamin Den Boer, first ,thanks very much , and what i try like this:
aa = Framer.Importer.load "imported/Untitled"
bb=new Layer
width:750,height:1134,backgroundColor:"transparency",clip:true
aa.list.superLayer=bb
# This imports all the layers for "Untitled" into untitledLayers1
aa.list.Scroll=true

in my sketch file ,i use a background shape mask that long shape,and group them ...but it also not work ..

Benjamin Den Boer

Ah, I see. You need to group "Rectangle 1" and the Text Layer "baba..." together. Then re-import, and uncapitalize "scroll" in your statement, like this:

aa.list.scroll = true

You could also take a look at the Scrollable template here: http://framerjs.com/learn/import/templates/ - it includes a .Sketch and Framer file.

Cyrus Cheng

Benjamin Den Boer, i had study of the Scrollable template,and i found a point ,in that template, all of element is not in a art board, and i had try to put them into a iphone6's art board, and then re improtto framer ,it's not work then...
in my case, wo group "Rectangle 1" and the Text Layer "baba...",and reimport ,the code also like the last i write...
it not work ...

Cyrus Cheng

i had try my case ,put all of element out of art board, and delete the empty artboard,..and reimport...then i can't see anything in framer.....i do not know what's wrong with it....

Benjamin Den Boer

Hey Cyrus Cheng - that's likely because the coordinates of your "list" parent group are not set to x:0, y:0, and thusly appear off-canvas.

Benjamin Den Boer

Here is a little demo. Sketch file included. Built using the same file set-up as yours: http://share.framerjs.com/c0eudxicrrgu/

Cyrus Cheng

Benjamin Den Boer,i have try to add x:0,y:0 to it's parent layer"bb",but it also not work ...

Cyrus Cheng

Benjamin Den Boer, i had try to put all of element into a art board-iphone5,and reimport,it not work
http://share.framerjs.com/bn9kglc81qfi/

Benjamin Den Boer

Hey Cyrus, ah I see. Yes, Artboards also serve as masks, effectively clipping the content within, which will be exported based on the bounds of the artboards. It's easier not to use artboards in this case. :)

Cyrus Cheng

Benjamin Den Boer ...But,if I use drag.events...it will be work ..and the out of art abroad can be drag in...

Benjamin Den Boer

Yes, but the contents will still be masked/clipped by the width and height of the artboard. You can drag it around in Framer, but it gets exported based on the size of your artboards. This prevents scrolling, because the height of the children (exported images) no longer exceed the parent (masking layer). (There is nothing to scroll, basically)

Cyrus Cheng

actually, i have try to Widening the edge of art board that can hold all of long shape,and then reimport ...it also not work...

Benjamin Den Boer

Hey Cyrus, make sure you have a layer mask in Sketch or otherwise a container with clipping enabled in Framer.
See: http://share.framerjs.com/h10skzntvery/ (Artboard height increased in Sketch, from the same example as I previously sent - Sketch file included)

Cyrus Cheng

i do try a new case,like this:
http://share.framerjs.com/6zc0y6but29y/
and i do not know what't wrong with a single image case of import about scroll ...

Benjamin Den Boer

You need to set the scroll on the "ss" parent layer, not the image itself: ss.scroll = true instead of imageLayer1.scroll = true

Cyrus Cheng

i set ss.scroll=true....it's also don't work...

Benjamin Den Boer

Hey Cyrus Cheng, you also need write "scroll" specifically, without caps (not: "Scroll"), like this: http://share.framerjs.com/pgwk947zvdl8/ :)

Cyrus Cheng

yep....i see ...thank you very much for the time of ur patience...

Read the entire post on Facebook