Using Framer to Recreate iPhone X’s Home Screen Animation
15 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° 15 — Animating Home Screen Icons on iPhone X
Design
Ask anyone I’ve ever worked with, and they’ll confirm that I am a Sketch fanboy. I have been on the Sketch bandwagon for over five years, and I’m always extolling it’s virtues to unconvinced Adobe-loving co-workers. But in the course of working on this little prototype, I’ve crossed the tipping point: I enjoy designing in Framer more than Sketch.
I created each of the 26 icons in this prototype from scratch in Framer (and, for an additional challenge, I also limited my color palette to Framer’s default swatches).
I love how well boolean operations work in Framer. Combining and subtracting shapes is a breeze and the result is always what I expect should happen.
The Path tool (pen tool) is a revelation. I love how it snaps to the grid at half-pixel increments.
Framer makes it easy to manipulate shapes to create otherwise complex icons. For example, to create that nice faux drop shadow effect on the App Store icon, I just drew rectangles and exagerated the corner radius on one of the points. #easypeasy
Even a shape as complex as Harmon Killebrew’s silhouette in the MLB Logo for their At Bat app was a breeze. It’s hard for me to articulate exactly why their pen tool works so well compared to others, but I love it.
I also learned a few good lessons about whether to use a shape or a frame. For example, while working on the Apple Photos icon I learned that blending options are available for frames, but not shapes. So to get the blended look of those eight rounded rectangles, frames was definitely the way to go. For more explanation between shapes and frames, check out this help article by Benjamin den Boer: Frames and Shapes.
After the fun of creating all of those icons, the next crucial part of the design for this prototype was to create all of the groupings in the layers panel. My groups made it possible to target sections of the home screen in order to stagger the animation: topLeft, topRight, middleLeft, middleRight, etc.
Code
Judging from the repetitive nature of my code, there’s probably a more efficient way of doing this. Still, efficiency isn’t usally my main objective when I’m prototyping. And, although the final animation isn’t perfect, it’s close enough. Here’s how I approached it.
I locked and unlocked my phone to see the real thing in action many, many times. It seemed like the icons were zooming in from above the screen, almost like they were all coming in from behind me. To get that sort of effect, I created a state, “off,” which scales the icon 4x and sets the opacity to 0. And, since I grouped my icons in the design tab, I applied that state to my groups:
topLeft.states.off =
scale: 4
opacity: 0
x: topLeft.x - 50
y: topLeft.y - 50You might also notice that I adjusted the x- and y-position so that when topLeft animates from the “off” to the“default” state, it appears to be flying in from the top-left of the screen.
Another crucial step to achieving this transition was adjusting the originX and originY for each group. Framer’s documentation was helpful for this:
layer.originX
Sets the x origin for scale, rotate and skew transformations. The origin is defined as a number, where 0 is the left edge of the layer and 1 the right edge. The default value is 0.5, the center of the layer.layer.originY
Sets the y origin for scale, rotate and skew transformations. The origin is defined as a number, where 0 is the top edge of the layer and 1 the bottom edge. The default value is 0.5, the center of the layer.
So, for example, my topLeft setup looked like this:
topLeft.originX = 1
topLeft.originY = 1
topLeft.states.off =
scale: 4
opacity: 0
x: topLeft.x - 50
y: topLeft.y - 50For contrast, here is the setup for the bottomRight:
bottomRight.originX = 0
bottomRight.originY = 0
bottomRight.states.off =
scale: 4
opacity: 0
x: bottomRight.x + 50
y: bottomRight.y - 50And then, before anything runs, I switched all of my groups to their “off” state:
middleLeft.stateSwitch("off")
middleRight.stateSwitch("off")
topLeft.stateSwitch("off")
topRight.stateSwitch("off")
bottomLeft.stateSwitch("off")
bottomRight.stateSwitch("off")Don’t forget the dock:
dock.states.off =
y: Screen.height+8
dock.stateSwitch("off")Once the setup was complete, it was just a matter of timing. Using Utils.delay I created a series of animations that results in something that looks very similar to the start-up animation of icons on my iPhone X home screen.
Utils.delay 1, ->
topLeft.animate("default")
topRight.animate("default")
Utils.delay 1.1, ->
middleLeft.animate("default")
middleRight.animate("default")
Utils.delay 1.2, ->
bottomLeft.animate("default")
bottomRight.animate("default")
Utils.delay 1.4, ->
labels.animate
opacity: 1
dock.animate("default")Lesson Learned
As I mentioned before, this prototype gave me a great opportunity to really put Framer’s design tools to the test—and I fell in love with them.
But, on a personal note, I learned (again) that I often spend more time than is necessary trying to make everything look ‘just right.’ I’m a perfectionist. So sue me.
See for Yourself
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.
Animating Home Screen Icons on iPhone X
https://framer.cloud/Xlltu
Thanks for following me and 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, you can find me on Twitter @toddjreynolds.
