Animate and Ship 50 iOS Spinners in 48 hours
・Travis
A fully transparent look at my process for discovering, curating, creating and shipping our newest series of animations.
Late on a Wednesday a few weeks ago I thought to myself, “let’s see if I can make 50 custom iOS loading animations by the end of Sunday…” If I started the next day, that would give me 4 full days to get the job done so that I could start posting them to our Dribbble portfolio. I ended up starting in the afternoon on Thursday, and by lunch on Saturday I was done! It was a marathon of work, but made totally possible using the right tools. Here’s how I did that.
Step 1: Find Inspiration
This is my favourite part. Having a project for which I get to go and spend a lot of time digging through the inspiring work on Dribbble is most definitely a treat. I spent the first part of Thursday afternoon finding really cool spinner animations.
Search & Collect
First, I create a new collection where I will save the animations that are awesome/inspiring/cool. Then, I start searching for great shots by selecting the animations tab, then adding a filter to find relevant designs.
For this project, the filters I used were: #uianimation, #loading, #loaders, #spinners, #loadinganimation.
At this point, my whole goal is to collect awesome stuff, not worrying about how hard or possible it might be to recreate an animation.
I quickly go through the various search results, and as I find shots I like I add them to a collection on my profile. This is a great part of the project, because I get to spend time looking at new trends, seeing new work and looking into people’s profiles, all of which really inspires me and pumps me up for the next phase.
Here are a few really nice ones from my Loading collection:
Queue Them Up
After I have a significant amount of designs in my collection, I start moving them into a Monday board. I do this one at a time so that I can have a closer look at the animation and gauge how difficult it will be to recreate.
As each animation goes into the board, I copy its url and paste it into a linkable column, name it and mark it as Easy, Medium or Hard so that I have a decent idea of how much time it will take to reproduce.
After looking at an animation, if I an idea on how to produce it I will add a note to the entry so that when it comes time to make it I will have a starting point of reference.
If there are multiple animations in a shot I will duplicate the entry for each animation I want to create.
Step 2: Animate
This is the big step, because it’s a lot of editing, tweaking, designing, and repeating a solid process that happens over and over and over again. The goal for this project is to produce and ship 50 Custom iOS ActivityIndicators, and to do that I use Flow to accelerate my ability to get work exported to Swift / Core Animation / Xcode.
Process
Process helps here, and it looks like this:
- (Re)create the design and import into Flow.
- Animate and Iterate.
- Export, Test and Tweak.
- Save the final animation file, move on. Don’t Stop
There’s not much to explain about this step other than.
I animate. And I don’t stop. And I just keep going. And I animate. And I don’t stop. And I just keep going. And I animate. And I don’t stop. And I just keep going. And I animate. And I don’t stop. And I keep on keep on keep on keep on going… Like this.
You get the point, right?
Non-stop animation until all 50 animations are done.
Examples
Here’s an example of designing, animating and testing animations.
Check out our other examples on the 5048 Showcase.
Step 3: Github
Now that all the fun work is done, I move on to producing the media so that I can upload everything nicely. The strategy here is that I want to produce a project that people can actually use. So putting the software up on Github is a critical first step, because we want to make our animations freely available and reference this project everywhere.
A Github project for my work is important because it makes available all the animations for anyone who wants to use them, and I use it as the centre point around which all my other media posts will be based.
Here’s how I go about publishing this project:
- Create a new Xcode project from one of the exported projects
- Create a few classes to make it easy to switch between animations
- Individually export each animation using Flow’s Custom iOS Activity Indicator option
- Import all the animation files (3 per animation, 50 animations = 150 files)
- Create a layout with all the spinners
- Record all the spinners on my phone
- Make an animated GIF in photoshop with a bezel around the animation
- Upload the Xcode project to Github
- Write the markdown page, including the GIF
Here’s what the final project page looks like:
Step 4: Dribbble
Almost there… The next step for me is to schedule all of my shots on Dribbble. First, I prepare 3 things for each project:
- A 1600x1200 mp4 with my animation centred
- A zipped version of my animation file.
- A description, using a template, of the shot being uploaded.
When all of that is done for each of the 50 animations, I then go into upload mania.
- I create a new project called iOS Spinners
- I upload/rebound each shot, using its prepared files and description.
- I schedule each shot so that there are 2 posted each workday for the next 25 days.
If you’re interested, check out my in-depth article on How We Publish to Dribbble.
Reflection
This was a fun and challenging project. At times, especially during the uploading sessions, it was incredibly mind-numbing. But, all in all it was pretty awesome to hammer all of this out in such a short amount of time. I discovered some lovely new aesthetics that people are working on, I learned some new animation techniques, and I pushed the limits of Flow. It was awesome.
I really like interacting on Dribbble, and have already seen a few comments and likes come through. I’m looking forward to seeing more, and have a few new projects up my sleeve that I will get to after we launch our upcoming official Figma integration (~ Nov. 24th).
