Published on <a href="https://blog.prototypr.io/using-framer-to-recreate-the-google-pixel-start-up-animation-6c73d1f19a71?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Todd Reynolds 
<h4>12 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º 12— Google Pixel Start-up Animation</h3>
<blockquote><a href="https://framer.cloud/thUgi">https://framer.cloud/thUgi</a></blockquote>
If you’ve ever powered up a Google Pixel you may have been momentarily entranced by the cute, little dots playing leap frog as the operating system boots up. I thought it would be fun to try recreating that animation in Framer using SVG paths.
<h4>Design</h4>
This design used a total of six frames (the screen frame, a container frame for all of the animation elements, and the four dancing dots), and three paths for the dots to follow as they animate. Pretty simple.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cHVCOs1d4iPILo4x3mHt2w.png">These four dots are about to get funky.
<h4>Code</h4>
The key to this prototype is Framer’s new ability to animate an object along a given path. Getting it set up was pretty straightforwad. Check out Framer’s Docs under the SVGPath section for more information.
<pre># Defining the path... jump = Layer.select("jump1")</pre>
<pre># Animating my blue dot along the "jump" path blue.animate point: jump.path</pre>
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*tnrH0RPmU88vKaogRTmX7g.gif">One small jump for a dot, one giant leap for this prototype.
My attempt at making the dot do consecutive jumps seemed to yield great results… for about a second. Then, it literally went off the rails, and I lost my poor, little blue dot.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*rRGFccP5O_BelmvA9s_X9A.gif">Wait! Come back, little dot! We can work this out.
And now, rather than bore you with all of the iterative details, check out the my progress as visually documented below:
The third time wasn’t exactly charming…
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*KdxdNU-oruqu9-xQgBKu1w.gif">
The fourth try seemed successful at first.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*hsUhU7eoCwG0Tg9kga2Eew.gif">
My fifth attempt was like, WHAT!?! 😖
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*zymyp9-hfcAqH8yQHCixpQ.gif">
Ah. Now that’s more like it.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*-R3t-HhONVAw-ZMIa9-NyA.gif">
Adding the other dots proved more challenging than I expected.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*9z9BRR1hRh4uZjnkFD4YvQ.gif">Well… That’s not quite right.
At this point it was a matter of working out the timing. The dots were successfully animating along the correct paths and then sliding back into place. So I slowed things down a little to fine tune the animation.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*oxUPdKUGzCXjWV1u6yPTNw.gif">
I created a function for each dot, and went through the animation one jump at a time to make sure that each dot was in sync. Here is the function for my blue dot.
<pre>startBlueAnimation = -&gt; blue.animate point: jump.path Utils.delay 0.4, -&gt; blue.animate point: jump.path Utils.delay 0.8, -&gt; blue.animate point: jump.path Utils.delay 1.4, -&gt; blue.animate x: blueX options: time: 0.8 Utils.delay 2.2, -&gt; blue.animate point: jump.path Utils.delay 2.6, -&gt; blue.animate point: jump.path Utils.delay 3.0, -&gt; blue.animate point: jump.path Utils.delay 3.575, -&gt; blue.animate x: blueX options: time: 0.8</pre>
Then, after a good deal of fine tuning, I had a working prototype of the startup dots. It may not be exactly the same as the original, but it’s close enough.
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*bXQlVcrRxVkXnzgcVBGkOA.gif">Hooray for leap-frogging dots!
And then, when everything was just right, I plugged into and external monitor and this happened:
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*D1ljaKulpYIwGD7ap36rqQ.gif">
Seriously. Nothing else changed—just my monitor. In fact, if I dragged the preview window to my laptop display and reloaded the prototype it went back to normal. So weird. 🐞
<h4>Lesson Learned</h4>
Working with SVG paths for animation was actually pretty simple. I even learned that it’s not necessary to duplicate the paths. For instance, I had three separate paths (jump1, jump2, and jump2). But, I only actually needed to define one of them, and then the dots would follow the arch of that path using their current x- and y-position.
<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.
Google Pixel Start-up Animation <a href="https://framer.cloud/thUgi">https://framer.cloud/thUgi</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6c73d1f19a71" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/using-framer-to-recreate-the-google-pixel-start-up-animation-6c73d1f19a71">Using Framer to Recreate the Google Pixel Start-up Animation</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 Recreate the Google Pixel Start-up Animation

12 of 100

Top Stories