Momo: An Experiment in SwiftUI Design and Animation

A quick walk through of my first SwiftUI app

Momo was originally conceived as a design and animation project. I started building the app in August 2020 and earlier this week, I decided it was finally time to leave this ambitious project unfinished.

Meet Momo

I dreamt of a simple and elegant app that could capture a particular mood or feeling and track it over time. What if we paired a single word with a single colour? I envisioned a certain vibrancy and smooth, fluid animations. What became of that dream is Momo — the colour journal app:

A screen recording of Momo showing its various screens.

The concept was simple, but it was only made possible with the imaginative spirit of designer Naomi Fontaine (thank you for always gamboling with me).

I won’t be diving into specific code examples here, but please let me know if you are interested in knowing more about how something was built.

Main Screen

Screenshots of the main screen. The left screenshot displays a purple blob and the options to either add an entry or see past entries. The right screenshot displays the word “Confident” alongside a yellow blob and a joystick used to change the blob’s colour.

The main screen features the focal point of the app: the Momo Blob. I created a SVG shape and converted it into a UIBezierPath that I could then animate. The warping and pulsing animation effect was indisputably the most complex challenge I faced whilst building this app. I credit this 2018 post for laying down the foundation for animating imperfect blobs (apparently there’s an audience for this!). I had to refashion and modernize the techniques, but the core animating concepts were gleaned from there.

The color design concept for Momo which shows the corresponding colors relative to the joystick position.

Animating the blob colour between three “base” colours was also up there in complexity. I combined what I read about gradient animation and colour interpolation, and created an AnimatableModifier to animate the blob’s colour based on the joystick’s position. (I opted to do the interpolation in the RGB colour space, which fared noticeably better than in HSB; HCL is arguably the best option, but it’s computationally expensive.)

Journal Screen

The left screenshot displays a line graph interpretation of the past seven journal entries. The right screenshot displays a list view of past journal entries.

The line graph animation was the most gratifying animation to build. With a little bit of help and some masking magic, the line snakes across the graph when the modal is presented. The selection line can be dragged; it snaps to the grid lines demarcating the dates and updates the mini blob view with the corresponding entry details.

Why am I leaving this project unfinished?

I never made a decision about data persistence. I tinkered with Core Data, but never fully investigated how that would interact with the composable architecture on which this app was built. The code is a patchwork of illusions and memory leaks. I improvised a lot.

When I started this project back in August 2020, I was three months into my iOS development journey, having spent the past seven years before that as a video editor and motion designer. I set out to build an app that basked in the delights of design and animation, because that’s what I knew and loved. I believe I succeeded in doing exactly that.