Published on <a href="https://blog.prototypr.io/using-framer-to-prototype-scrolling-and-paging-in-mlb-atbat-for-ios-de06df1888b1?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>9 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.
<h3>Nº 9 — Scrolling and Paging in MLB AtBat</h3>
<blockquote><a href="https://framer.cloud/WFOJf">https://framer.cloud/WFOJf</a></blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*Pnqe28ofwPZgAWQfGyRBSQ.gif">
Major League Baseball’s AtBat app has been one of the most successful sports apps since it’s inception. Calling me cheap is an understatement. So the fact that I’m willing to pay the annual fee for this app tells you two things: 1) It’s a great app, and 2) I really love baseball.
<h4>Design</h4>
Creating this single-page mockup was fun—but it was a long process. There were a lot of icons that I needed to illustrate. I actually started this prototype back in October during the World Series, so I did the iconography in Sketch because I couldn’t create it in Framer at the time.
For the Kansas City Royals logos, Sketch plugins like <a href="https://github.com/Iconscout/logodrop">LogoDrop</a> come in handy. To use it, you simply search for a company (or in this case “Royals”), and if there is a logo out there, it finds it for you and allows you to insert the vector art directly into your Sketch file.
But besides the dozens of icons I needed to create, the remaining visuals for the prototype were simple and straightforward. Here is a screenshot of the design:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aElF_-gNzBnYzuNBZMg8Gw.png">Even after moving to Dallas, Texas, my allegiance to the Kansas City Royals is as strong as ever.
<h4>Code</h4>
The basic interactivity I wanted for this prototype was simple enough:
<ul>
<li>One main vertical scroll area.</li>
<li>Pagination in the featured news section at the top.</li>
<li>Pagination in the videos section.</li>
</ul>
I found that placing scroll components within scroll components can be a little tricky sometimes. But I was eventually able to get it working. Here’s a few insights from the coding portion of this prototype.
The first thing I did was create a new Flow Component. Even though this prototype was just a single page, I like to use Flow Components to handle my vertical scrolling. Admittedly, this might not be the best way to do it, but it works for me (usually).
<pre>flow = new FlowComponent flow.showNext(homeView) flow.header = navbar flow.footer = tabBar</pre>
Next, I created my first Page Component for the featured stories, set the y-position, height, and width, and then disabled vertical scrolling and moved it to be within my main view:
<pre>topStories = new PageComponent y: 115 height: 232 width: Screen.width scrollVertical: false parent: homeView</pre>
I created an array of the featured news items and used it to add them to my topStories page component:
<pre>topStoriesArray = [news1, news2, news3, news4, news5]</pre>
<pre>for item in topStoriesArray item.parent = topStories.content</pre>
I was surprised that the alignment seemed to be off. The first item in my page component was much lower than it should have been. But when I paged through the items, everything was normal. It was only on the initial load that the first item was misaligned.
<img alt="" src="https://cdn-images-1.medium.com/max/560/1*H2_qRszASOQoXFdQ4VWSlg.gif">
After a fair amount of frustration and troubleshooting, I discovered that my fix was to align the news items in my design to be directly beneath the navigation bar. I’m not exactly sure why this works, but it’s just a prototype, and I got it working, so I moved on.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L46cP9Plqpl8oJRlbGKo9w.png">
My next odd challenge was the pagination dots. They weren’t showing up for some reason. But after more troubleshooting (and quite honestly, dumb luck), I found that if I set things up in code in a particular order, everything worked. After refactoring to first, set up the page component, then create and set up my flow component, and then position the page component behind my pagination dots, everything behaved like I expected.
<pre>topStories = new PageComponent y: 115 height: 232 width: Screen.width scrollVertical: false parent: homeView</pre>
<pre>flow = new FlowComponent flow.showNext(homeView) flow.header = navbar flow.footer = tabBar</pre>
<pre>topStories.placeBehind(paginationDots)</pre>
Again, I’m not sure why that did the trick, but who am I to second-guess the prototyping gods.
Next I tackled the Videos section. It was trickier than the featured news section because the items are not the full width of the screen, so I didn’t believe I could just use a standard pagination control. Instead, I wrapped my videos section frame in a scroll component, and then set it up to behave in a way that resembled a pagination component.
Setting up the scroll component was pretty standard stuff. Since I already grouped the video items in design, I used the ScrollComponent.wrap method, and then set a few properties.
<pre>videosSection = ScrollComponent.wrap(videosScroll) videosSection.x = 0 videosSection.width = Screen.width videosSection.contentInset = left: 11 right: 11 videosSection.scrollVertical = false videosSection.directionLock = true</pre>
With my scroll component in place, the next step was to set up its behavior so that the items snapped into place. The piece of this code I was most proud about was finding and using the midX property rather than figuring out the absolute x-position and doing a lot of math. The snippet below is basically saying, when the scrolling ends, if the new amount of scrolling is less than the x-position of the middle of the first video, snap to the beginning of the first video. I did the snapping with the “scrollToLayer” method. The rest of it just uses other conditions to determine with layer to snap to.
<pre>videosSection.onScrollEnd -&gt; if videosSection.scrollX &lt; videoCard1.midX videosSection.scrollToLayer(videoCard1) else if videosSection.scrollX &gt; videoCard1.midX &amp;&amp; videosSection.scrollX &lt; videoCard2.midX videosSection.scrollToLayer(videoCard2) else if videosSection.scrollX &gt; videoCard2.midX &amp;&amp; videosSection.scrollX &lt; videoCard3.midX videosSection.scrollToLayer(videoCard3) else if videosSection.scrollX &gt; videoCard3.midX &amp;&amp; videosSection.scrollX &lt; videoCard4.midX videosSection.scrollToLayer(videoCard4) else if videosSection.scrollX &gt; videoCard4.midX &amp;&amp; videosSection.scrollX &lt; videoCard5.midX videosSection.scrollToLayer(videoCard5)</pre>
The last little nugget I want to share is how I was able to overcome the interplay of my scrolls within scrolls. Initially, the scrolling wasn’t very smooth, especially if the vertical scroll started within one of the horizontal paging areas. I checked the documentation to see if there was anything I could use that might be helpful with this problem and found the solution: “scroll.directionLock,” which allows dragging in only one direction.
<h4>Lesson Learned</h4>
Scrolling and paging are basic functionality that I use in many of my prototypes. But I was surprised how weird and complicated things were getting when I wanted to embed one scroll inside of another. When it comes to prototyping, perseverance is paramount. When something isn’t working like you think it should, there’s probably another way to do it. For me, one of Framer’s biggest advantages over its competition is knowing that I can do literally anything I need to do in a prototype. The trick is figuring out how to do it. Learning to use the documentation has been a big factor in my own ability to figure out how to do it. Hopefully my ramblings about all of these prototypes are factoring into improving your abilities.
<h4>Go Check Out This Prototype</h4>
If you’d like to learn more, please download my prototype and poke around in the code a bit (the link is repeated below). But don’t judge me — prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.
Scrolling and Paging in MLB AtBat for iOS <a href="https://framer.cloud/WFOJf">https://framer.cloud/WFOJf</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=de06df1888b1" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-prototype-scrolling-and-paging-in-mlb-atbat-for-ios-de06df1888b1">Using Framer to Prototype Scrolling and Paging in MLB AtBat for iOS</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 Prototype Scrolling and Paging in MLB AtBat for iOS

9 of 100

Top Stories