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

What is Framer? Join the Community
Return to index
Tiffany Chen
Posted Jun 28 - Read on Facebook

Hi! When importing a layer from Sketch, I am trying to 1) scale the layer so it fits the screen and then 2) wrap the layer with a scroll component. It seems like what gets wrapped is the originally unscaled layer rather than the new scaled layer, though. Does anyone know how to address this?

8 Comments

Trevor Phillippi

Could you include an example? Wasn't able to reproduce this quickly.

Tiffany Chen

The problem is most apparent when using the 6s+ device, so I'm thinking it might have something to do with the resolution -- but not too sure..

# Import file "galleryImages"
imagesLayer = Framer.Importer.load("[email protected]")

# rescale for new width to be slightly smaller than screen width
imagesLayer.imagesGroup.props = scale: ((Screen.width - 20) / imagesLayer.imagesGroup.width)

imagesLayer.imagesGroup.center()

# stuf goes wrong here
gallery = ScrollComponent.wrap(imagesLayer.imagesGroup)

Trevor Phillippi

So, the issue is that scaling the layer does not change the layer's frame. It's simply a transformation applied to the layer. The ScrollComponent.wrap will use the layer's original frame, thereby cropping the internal content. Your options are to size the scoll's content layer manually (by multiplying w/h by the scale factor) or just scale the content layer after wrapping, as I did in this example: http://share.framerjs.com/uxbn7mucg1np/

Trevor Phillippi

There are lots of weird edge cases here tho. Are you mainly trying to achieve a responsive-type layout? Stuff like this will always be easier using Framer Layers directly rather than scaling Sketch layers (which are essentially images.)

Tiffany Chen

Thanks, Trevor! I discovered the same workaround (scale the content layer after wrapping) and then a non-elegant hardcode addressing all the edge cases that arise with the 6+. And yes, I was going for a responsive layout -- the main problem was that the stuff I needed from Sketch was a grid of images of varying sizes that can be switched out easily, and I didn't want to have to deal with layer positioning for all of that. Is there an easy way to recreate something like that with Framer layers?

Trevor Phillippi

How dynamic is the grid? If the grid has some rules (e.g. columns, fixed height, etc) it'd be pretty straightforward. I could make an example if it's helpful.

Tiffany Chen

I'd say it's fairly constrained -- the grid has a fixed number of columns (2) and grid items all have the same height:width ratio, with some of them being portrait vs. landscape. An example would be extremely helpful, if possible!

Trevor Phillippi
Read the entire post on Facebook