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.
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/
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.
Try setting the height of the scroll component to the viewport height.
is the name of the layer 'content'? try naming it something else?
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.
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.