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

What is Framer? Join the Community
Return to index
Rafe Chisolm
Posted May 14 - Read on Facebook

Hey, Looking for some advice. I'm trying to create a 3x3 grid where each panel occupies the Screen width/height. Pardon the methods used, or verbose coding this is my first attempt at a layout that allows scrolling horizontally across columns, that within themselves scroll vertically. Running into a few roadblocks: http://share.framerjs.com/9ymi20s5l5l8/

1) draggable.overdrag is preventing the ability to scroll across the columns, but would help prevent the scroll region from overlapping the top grey bar

2) Can't figure out how to get the pages to "snap" to whatever page is occupying the majority of the Screen that is in view - right now it just kind of "floats" depending where the cursor drags

3) The up arrow/carat doesn't ".snapto" the linked Page in the grid

2 Comments

Niels van Hoorn

I'm not completely sure what you're trying to do here, so please correct me if I'm understanding things wrong. In the prototype you shared, every page in your PageComponent is also a PageComponent. This is unnessecary. If I understand correctly what you're trying to achieve, it's one PageComponent that scrolls horizontally, that contains three PageComponents that scroll vertically and each have three pages.
I've edited your prototype to reflect this: http://share.framerjs.com/f998u6pg9qjd/
Each Page1a, Page2a, etc is now just a Layer, and WebViewScroll is a PageComponent with the three other PageComponents as pages. Does this make sense?
Hope this helps.

Niels van Hoorn

As for the arrow/carat: you were assigning new layers to the same variable, so only the last one you defined got the event attached.
I've improved that in this version: http://share.framerjs.com/vrtrdbr2v86w/

Read the entire post on Facebook