Using Framer to Recreate the Google Pixel Start-up Animation

12 of 100

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.

Nº 12— Google Pixel Start-up Animation

https://framer.cloud/thUgi

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.

Design

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.

These four dots are about to get funky.

Code

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.

# Defining the path...
jump = Layer.select("jump1")
# Animating my blue dot along the "jump" path
blue.animate
   point: jump.path

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.

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…

The fourth try seemed successful at first.

My fifth attempt was like, WHAT!?! 😖

Ah. Now that’s more like it.

Adding the other dots proved more challenging than I expected.

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.

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.

startBlueAnimation = -> 
   blue.animate
      point: jump.path
   Utils.delay 0.4, ->
      blue.animate
         point: jump.path
   Utils.delay 0.8, ->
      blue.animate
         point: jump.path
   Utils.delay 1.4, ->
      blue.animate
         x: blueX
         options: 
            time: 0.8
   Utils.delay 2.2, ->
      blue.animate
         point: jump.path
   Utils.delay 2.6, ->
      blue.animate
         point: jump.path
   Utils.delay 3.0, ->
      blue.animate
         point: jump.path
   Utils.delay 3.575, ->
      blue.animate
         x: blueX
         options: 
            time: 0.8

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.

Hooray for leap-frogging dots!

And then, when everything was just right, I plugged into and external monitor and this happened:

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. 🐞

Lesson Learned

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.

Go Check Out This Prototype

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
https://framer.cloud/thUgi