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.
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.
the_sky_solid_statusBar https://framer.cloud/GyAXtthe_sky_transparent_statusBar https://framer.cloud/SiFkW
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.https://framer.cloud/TLJgL
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.