Published on <a href="https://blog.prototypr.io/using-framer-to-reproduce-the-onboarding-experience-in-clear-todos-8a11d7d9f2b9?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>2 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 hone my craft.
<img alt="" src="https://cdn-images-1.medium.com/max/516/1*IKr29w9Fbu1GJ1wDZ1zk4w.gif">
<h3>N° 2—Clear Todos’ Welcome Screens</h3>
<blockquote><a href="https://framer.cloud/RdGyQ">https://framer.cloud/RdGyQ</a></blockquote>
<h4>Design</h4>
When Clear was first released for iOS, it was revolutionary. It was an app that relied entirely on gestures. There wasn’t a single button. I was really excited about this app, and loved how its developers helped me think differently about interactions in a mobile app.
Creating the visuals for this entire prototype took a little while, but to be honest, it was pretty straightforward. Still, with all of the screens I needed, there was a lot to do.
My setup for this prototype was to create eight artboards—one for each page of the experience. On each artboard I added the text. I left the phone mockups off of the artboards and poisitioned them in code. The status bar and the pagination dots were also floating on the canvas. As you can see below, the phone images were aligned to the bottom of their respective pages, but that was only so that I could keep them straight. Because of how I positioned them in the code, they could have been floating anywhere in the design canvas and it wouldn’t have made a difference.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aa6ZZNgT5S-kIWDUzXheIA.png">
<h4>Code</h4>
Once the visuals were all created in the Design half of Framer, I moved over to Code. Initially, it seemed like it would go pretty quickly. It didn’t. The real trick for this prototype to reproduce the motion design and interaction in Clear’s onboarding views is how the phone example and pagination dots slide up as you swipe from page one to page two, and then slide down between pages six and seven. I also need to find a way to animate the phones into view after the text for each page.
I tried multiple ways of achieving the interaction I wanted, but most of them didn’t work. Getting the text to advance from page to page was easy with Framer’s Page Component. I created a new Page Component, and then added each of the artboards from the Design. After disabling vertical scrolling in the Page Component, I could swipe between pages pretty easily.
<pre>textPage = new PageComponent width: Screen.width height: Screen.height scrollVertical: false backgroundColor: clear</pre>
<pre>textPage.addPage(WelcomeView, “right”) textPage.addPage(View2, “right”) textPage.addPage(View3, “right”) textPage.addPage(View4, “right”) textPage.addPage(View5, “right”) textPage.addPage(View6, “right”) textPage.addPage(View7, “right”) textPage.addPage(View8, “right”)</pre>
For me, the best way to make the phone illustrations advance was to put them into a new Page Component of their own as well.
<pre>phonePages = new PageComponent width: Screen.width height: 379 scrollVertical: false scrollHorizontal: false y: bottomY backgroundColor: clear</pre>
<pre>phonePages.addPage(phonePage2, “right”) phonePages.addPage(phonePage3, “right”) phonePages.addPage(phonePage4, “right”) phonePages.addPage(phonePage5, “right”) phonePages.addPage(phonePage6, “right”)</pre>
You might have noticed how both the vertical and horizontal scrolling is disabled in the phonePages Page Component. I did that to eliminate conflicts with scrolling the textPage component. Also, in my code I created the phonePages component first, then the textPage component. Ordering it this way ensured that the textPage component sat above everything by making it so textPage was put in the front of the phonePages component.
The initial positioning of phonePages (and the pagination dots) was just off the screen at the bottom. I first tried to animate from off-screen to its on-screen position by using states. But that produced some awkward transitions.
For the solution I used my old friend Utils.modulate(). The trick was to use a few conditional statement to avoid the strange transitions we experienced in my earlire attemps.
<pre>textPage.on Events.Move, -&gt; if textPage.currentPage == WelcomeView imgY = Utils.modulate(textPage.scrollX, [0,375], [bottomY,288],true) phonePages.y = imgY dotsY = Utils.modulate(textPage.scrollX, [0,375], [bottomY,296],true) paginationDots.y = dotsY else if textPage.currentPage == View2 imgY = Utils.modulate(textPage.scrollX, [0,375], [bottomY,288],true) phonePages.y = imgY dotsY = Utils.modulate(textPage.scrollX, [0,375], [bottomY,288],true) paginationDots.y = dotsY else if textPage.currentPage == View6 imgDown = Utils.modulate(textPage.scrollX, [1875,2250], [288,bottomY], true) phonePages.y = imgDown dotsY = Utils.modulate(textPage.scrollX, [1875,2250], [288,bottomY],true) paginationDots.y = dotsY</pre>
<h4>Lesson Learned</h4>
I learn something from every prototype, and this time I was reminded that there comes a time in every prototype when although what you have may not be perfect, it’s good enough. It is, after all, a prototype.
The thing that bugs me about this prototype is how the pagination dots “hop” slightly when they slide up and into view. I tried debugging, but after a few minutes I decided that it wasn’t a big deal. This prototype was good enough, and it was pretty darn close to the original in-app onboarding experience of Clear Todos.
<h4>See for Yourself</h4>
Feel free to download the 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.
Clear—Welcome and Onboarding <a href="https://framer.cloud/RdGyQ">https://framer.cloud/RdGyQ</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8a11d7d9f2b9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-reproduce-the-onboarding-experience-in-clear-todos-8a11d7d9f2b9">Using Framer to Reproduce the Onboarding Experience in Clear Todos</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 Reproduce the Onboarding Experience in Clear Todos

2 of 100

Top Stories