Published on <a href="https://blog.prototypr.io/mimicking-the-large-navigation-bar-behaviors-in-apples-mail-app-4f1991d45eab?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>14 of 100</h4>
My goal is to create 100 prototypes of interactions from some of my favorite apps. I know my way around Framer a little bit, but there is always room for improvement. Using Framer to recreate existing apps should be an effective way to practice and refine my craft.
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*briPxD4S2JCegCjcWu4Sxg.gif">
<h3>N° 14 — Apple Mail Navigation Bar Transitions</h3>
<blockquote><a href="https://framer.cloud/nROKk">https://framer.cloud/nROKk</a></blockquote>
<h4>Design</h4>
In this design I have three main elements: a navigation bar, a toolbar, and a table view (which contains all of my email list items). The toolbar doesn’t do anything but sit pinned to the bottom. The list and all its email subitems will eventually be wrapped in a scroll component (or so I thought). But, the real action is happening in the navigation bar.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_xgiRbIlb9nK9Ei404GbRg.png">
The new-ish navigation bars in iOS are most often seen in Apple’s own apps (like Mail, Apple Music, or Messages). As the user scrolls up, the navigation bar begins to collapse and the large title hides, and a smaller version of the title appears in the center of the navigation bar. If the user scrolls down from the top, the navigation bar expands and a search bar is revealed.
To achieve those interactions in my prototype I needed to prepare everything in my navigation bar design. Let’s have a look at my layer list.
<img alt="" src="https://cdn-images-1.medium.com/max/428/1*xWKNN9SIoHxEEB8MRgc1og.png">
There you can see my searchBox frame, which includes the searchTextPlaceholder frame and the searchBoxBackground frame (sidenote: my first thought was to simply use a rectangle shape for the background, but it didn’t size correctly, so I used a frame instead). You can also see everything else that makes up the navigation bar, but please direct your attention to the inconspicuous Rectangle shape that sits just above the navTitle. That navTitle item is the extra-big title. The Rectangle has the same fill color as the navBar, so it blends in and acts as a mask. So, when the list is scrolled up, the title can slide up and under the Rectangle, hidden from view.
With that in place, the other key to getting this to work was to make sure all of my resizing properties were correctly set for the searchBox so that its behavior would imitate what happens in the Mail app.
<h4>Code</h4>
I only needed 14 lines of code to create this prototype in Framer. But before writing those 14 lines, I wrote multiple lines that I eventually just tossed because I discovered it wasn’t the right way to go.
Initially, it seemed obvious to me that the list of emails should become a Scroll Component. Assuming that the design setup is correct, wrapping an existing object in a new Scroll Component is simple:
<pre>scroll = ScrollComponent.wrap(list)</pre>
In the code above, “scroll” is my variable name and “list” is the name of my frame containing all the email list items (there’s a time and a place for creativity, but naming objects and variables usually isn’t one of them).
Then, I set up a couple of options for my scroll. I disabled horizontal scrolling and created a content inset on the bottom to account for the height of the toolbar at the bottom of the view.
<pre>scroll.scrollHorizontal = false scroll.contentInset = bottom: 45</pre>
That was it. I had a perfectly scrolling inbox list.
Then I started coding the behavior of the navigation bar using the trusty Utils.moduate() function. Again, it seemed simple enough.
<pre>scroll.onScroll -&gt; navBar.height = Utils.modulate(scroll.scrollY, [0, 52], [116, 64], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*0fVF8K89Xjv6ooV0GeXHhA.gif">
It looked like my little trick using the rectangle to hide the large navbar title was going to work. But there was definitely a problem with the scroll. So next I tried adjusting the y-position of the scroll at the same rate as the navbar’s collapse.
<pre>scroll.y = Utils.modulate(scroll.scrollY, [0, 52], [116, 64], true)</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*hdg9wgCT8o78jqSY9kOGrQ.gif">“Close, but no cigar,” as they say.
Adjusting the y-position of the scroll while it was scrolling achieved something close to what I wanted, but it was too “parallaxy.” It was at this point that I changed directions. I began to feel like a scrolling might not achieve the feel I was after. So, I scrapped all of that code and started looking into to dragging instead of scrolling.
Essentially, dragging a list vertically is the same as scrolling. One difference is the amount of setup. Here’s what I needed to get my list to look like it was scrolling:
<pre>list.draggable.enabled = true list.draggable.horizontal = false list.draggable.constraints = y: -list.height + Screen.height height: (list.height*2)-564 list.draggable.overdrag = true</pre>
Then, same as before, I started adjusting values based on the y-position of the list as it was being dragged:
<pre>list.onDrag -&gt; if list.y &lt;= 116 #Collapsing the navigation bar navBar.height = Utils.modulate(list.y, [116, 64], [116, 64], true) navTitle.y = Utils.modulate(list.y, [116, 64], [60, 8], true) titleSmall.opacity = Utils.modulate(list.y, [80, 72], [0, 1], true) else #Expanding the navigation bar navBar.height = Utils.modulate(list.y, [116, 168], [116, 168], true) searchTextPlaceholder.opacity = Utils.modulate(list.y, [160, 168], [0,1], true)</pre>
The end result isn’t perfect. Scrolling (dragging) too fast can break it a little bit, and so can swiping and allowing the inertia to move the list. But if you drag the list up and down methodically, you see the desired behavior—either the big title hides and the small title appears as the navigation bar collapses, or the search bar is revealed as the navigation bar grows.
<h4>Lessons Learned</h4>
My takeaway from this prototype is pretty simple: There’s more than one way to skin a cat. I mean, there’s probably a way to get this working with a Scroll Component. But when my first attempts didn’t pan out, I went a different direction. When prototyping it’s important to understand the goal you are trying to achieve. And, if you’re just trying to show a navigation bar that grows or collapses, it probably doesn’t matter if you are dragging the list or scrolling it. Just do what works best.
<h4>Go Check Out This Prototype</h4>
Feel free to download my prototype and poke around in the code a bit (the link is repeated below). Just remember, prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
Apple Mail Navigation Bar Transitions <a href="https://framer.cloud/nROKk">https://framer.cloud/nROKk</a>
Thanks for following me in my journey to 100 prototypes. I hope you enjoy my little experiments with Framer. If you have any ideas of something you’d like to see me prototype, let me know with a comment. You can also find me on Twitter @toddjreynolds.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4f1991d45eab" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/mimicking-the-large-navigation-bar-behaviors-in-apples-mail-app-4f1991d45eab">Using Framer to Mimic the Large Navigation Bar Behaviors in Apple’s Mail App</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using Framer to Mimic the Large Navigation Bar Behaviors in Apple’s Mail App

14 of 100

Top Stories