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

What is Framer? Join the Community
Return to index
Joshua Mauldin
Posted Jun 11 - Read on Facebook

I'm working on importing a Sketch file that's taller than the viewport. If I do that, I'm noticing that I can't get the ScrollComponent to work.

Here's where I am so far: http://share.framerjs.com/npdz18arybvs/

If I don't use the import feature, I'm fine. If I do, I don't seem to be able to be able to scroll.

Help?

6 Comments

Balraj Chana

How is your sketch file set up? Try removing the 'Mobile Portrait' artboard and place all of your layers within a group before you wrap the contents inside a ScrollComponent. Working example here: http://share.framerjs.com/5ovfx0bflifz/

Joshua Mauldin

I tried that, and got this:

[Error] TypeError: undefined is not an object (evaluating 'layer[propKey]')
wrap (framer.js, line 3699)
(anonymous function) (.temp.html, line 8)
global code (.temp.html, line 10)

I removed everything from my document except this:

pets = Framer.Importer.load "imported/pets-no-artboard"
scroll = ScrollComponent.wrap(pets.content)

I only get a little blue scroll area in the upper left.

David Louie

Try setting the height of the scroll component to the viewport height.

Cemre Güngör

is the name of the layer 'content'? try naming it something else?

Joshua Mauldin

Yeah, no go there. I noticed in other examples that I had to append "superLayer: scroll.content" to new layers that I created, but the docs don't let on that I can do that with imported Sketch files.

Balraj Chana

Is it possible to take a screenshot of your expanded layers list in sketch? I think that's where the problem lies. The example I showed you earlier should have solved your issue.

Framer should import you designs perfectly and to enable scrolling is just a matter of writing one line of code: layerName = ScrollComponent.wrap(scrollLayer).

For scrolling to work, in sketch, you need to remove the artboard -> place all content in one group -> place the scrollable layers in a subgroup -> place a background layer directly under the subgroup -> use the background layer as a mask -> re-import.

Download the scrollable .zip file here: http://framerjs.com/learn/import/templates/. Inside is a sketch file which displays the correct group setup to enable scrolling.

Read the entire post on Facebook