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

What is Framer? Join the Community
Return to index
Jonas Treub
Posted Sep 13 - Read on Facebook

Hello everyone. Here’s a prototype I made of the iPhone X springboard transition. Click on the Framer app icon then swipe up to return to the springboard.


Jason Sparks

I am using the flowComponent that automatically makes content scrollable if it is longer than the screen length.
It also creates fixed headers and footers by assuming the top most layer is the header and the bottom most layer is the footer.
This is really handy but here is my issue.

I want a transparent iPhone status bar/header (wifi, signal, battery etc) as a fixed header that appear on top of the content (in a flowComponent) .

As soon as I make my statusBar transparent and move my content up so you can see the image beneath the status bar, the status bar is no longer fixed because the y value of the content is the same as the y value of the statusBar/header and this changes the whole structure in the code view.

I’ve uploaded two prototypes, one with a solid statusBar that does not overlap the content/image, and one with a transparent statusBar that does overlap the content/image. You will see one has a fixed header as desired, but one has a moveable header. Is there a way to avoid this while still using flowComponent and automatic headers.


Jonas Treub

You don't want the status bar to be part of the scrollable content. If you place the status bar in is own artboard you can make it fixed. Or you can extract the status bar out of its current hierarchy by setting its parent to null.

Matthew Mang

Looking at this after the keynote, I feel like the way Jonas solved the status bar and the bottom swiping area is more elegant than what Apple actually implemented.

Read the entire post on Facebook