<aside> 👋

This, and all of the blogs, give an overview of the process and steps taken for each part. I’ve included images taken from the Figma File where the majority of the work lives to illustrate the process.

If you would still like to see further details on each part, please view the Figma File in full.

It can be found at the end of this page, or on this master page.

</aside>

Logo Animation

I wanted to animate my logo, primarily to feature on the splash screen of the app. After spending some time thinking, I thought it would be nice to have the lines draw themselves in and then form the logo.

To do this, I used LottieFiles, a animation platform which basically has a light, browser based version of after effects. This was actually very simple to animate, just needing to use the “trim path” effect on the lines, and having the stops scale in.

Overall I thought the finished animation was really smooth and effective and would work well for my splash screen and other brand videos.

<aside>

</aside>

Screen to Screen Animation

I also wanted to consider the animation and motion between screens. For this I experimented with different effects in Figma, eventually settling on the “gentle” effect over 600ms. This gave a light spring to the transition between screens which felt super nice but not over the top.

Loading Screens

For loading screens, such as when the app is finding network in the user area, I wanted to create a simple animation for it. I wanted to use Figma’s “smart animate” for this, so had to create the animation of each element separately, then arrange them in an overall component. This worked really and created the effect of the app reaching out to find networks and bring them together.

<aside>

If you want to see this in action check out the prototype.

</aside>

Landmark Screens

I had created then big icons for landmark screens, used when users finished a task. To embellish them further, I used smart animate again. I first had them pop in, by scaling them down in and reducing the opacity in the first instance, then had the ring of dots rotate by setting them 179 and -2 degrees in the following instances. These subtle effects worked well at bringing the screens to life.