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

What is Framer? Join the Community
Return to index
Stephen Crowley
Posted Jul 31 - Read on Facebook

Ok, so a simple scroll on a masked layer (picture a news feed showing scrolling through cards) is not working for me in Sketch. I could be flaking but can anyone screen cap their Sketch Project layers showing a masked layer that allows scrolling?

16 Comments

Herve Mischler

Same for me, did you find an answer?

Stephen Crowley

Hey Herve- right now I am creating a new layer with clip and scroll in Framer and then using it as a superLayer. example: feedContainer = new Layer
width: 300
height: 540
clip: true
backgroundColor: 'white'
feedContainer.scroll = true

feedView.superLayer = feedContainer

Stephen Crowley

Old framer would allow you to just create the grouped layer with a suffix of masked scroll and put that under elements you want masked- and it would do the same thing. Unfortunately that doesn't work anymore.

Herve Mischler

So there is no simple way to do it like layernameScroll.scrollVertical = true using a mask in sketch? I've seen that in the facebook example on the framerJS website.

Stephen Crowley

For me, when using a mask in sketch it cuts off the masked elements on import. I'll test it again though... I just kind of gave up on and used the solution mentioned above.

Herve Mischler

ok thanks, i'll give it a try!

Herve Mischler

It works… but I would prefer what is described here

Stephen Crowley

Same- it just seemed like a much more elegant way to define it in Sketch.

Herve Mischler

Just realised it was your article I was reading yesterday! :) Good job!

Stephen Crowley

Ha, that's cool! Thank you!I'm going to update it with references to some more in depth "how to" articles that others in the framer community have written. Some are very well done.

Ale Muñoz

Here's a sample project with scrolling (both horizontal and vertical) that works fine in the latest versions of Studio and Sketch: http://cl.ly/1k1I2s2d3O3q There's not much to it, really: just make sure to name your layer "whatever scroll". Make sure to write 'scroll' in lowercase, as there's a bug in my code (already fixed, new Sketch release coming soon). Other than that, just inspect the sample and the code. Sorry for taking so long to build the example, Stephen : )

Stephen Crowley

No worries Ale, you're a busy guy :) This is much appreciated, thank you!

Ale Muñoz

Let me know if it works for you, I have the feeling that the key is the "scroll name in lowercase" (yes, that is a bit embarrassing : )

Herve Mischler

Thank you so much Ale Muñoz !! Scroll name in lowercase is the key and don't forget to rename it layername_scroll in the code.

Ale Muñoz

Excuse me while I go hit my head against a wall. I'll try to get this fix out as soon as possible : )

Herve Mischler

haha! I guess I'm not the only one having hard times between "layername scroll" in sketch and "layername_scroll" in framer ;)
You made my day, everything is just easier now!

Read the entire post on Facebook