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

What is Framer? Join the Community
Return to index
Nelson Vasconcelos
Posted Feb 04 - Read on Facebook

Hey guys,

I'm working on a scrollable tabs prototype for Android:
http://share.framerjs.com/t7u7x4t9gv31/

I'm trying to figure out how to scroll of the toolbar and keep the tab bar anchored on top, just like on this example: https://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling

Each of the pages linked to the tabs are scrollable and that's the tricky thing. I think I should link the overdrag of these scroll components to the y position of the page component and the toolbar, but I wasn't successful :(

Anyone has any tips?

Thank you!

1 Comments

Krijn Rijshouwer

I think you want something like this. You could also use states if you would setup your code a little bit differently, but this basically does the same.

I made a handlePageScroll function for you which triggers the toolbar and tabs to `slide("up")` when the page is being scrolled further then the toolbar height. (Which is also triggered when you switch between pages. `slide("down")`)

http://share.framerjs.com/lvz2bl9c4bbd/

Read the entire post on Facebook