Super fancy splashes!
Creating an animated Splash Screen for your iOS app using Lottie
Splash screens are the windows to the app's souls. It's the first thing any user will see when they open your app (and we all know that the first impression is really important).
For a very long time, our app had just a plain boring splash with a static image (with veeeeeeery little movement). Later, we created a second version of the Splash, which we improved with a pulsing logo, it brought a much bigger appeal to the users and it was way nicer to watch.
But… I thought that it was not enough.
What if we could bring a little bit more life into our splash screen? What if we had the power to change the animation whenever we wanted?
The Beginning of a Dream
It was Christmas time! And how could I resist all the magic and beautiful decorations from the holidays?
I gathered some of the designers and managers with a not-so-clear meeting title: Christmas Magic on App 🎄. And it worked! Everyone came in really curious about what could it be.
So I threw the idea: Making a series of visual changes on the app to celebrate the holidays! And also, make them somehow remotely updatable so we could change it any time of the year.
And our main star: A new holiday-themed splash screen animation.
Opsies! Is it a real Splash?
Ok… I have something to confess. The actual app's splash screen is not really animated. It's a solid color screen (iOS splash screens cannot be dynamic 👀). But we have a few things that we need to load on the app start, so we created a secondary splash (where the actual loading happens).
The real splash screen is optimized to load as fast as possible, and the secondary splash has the same background color, so the transition between them is seamless, and if you are not aware it's happening, it's undetectable.
Every animation will be taking place on this secondary splash, where we can have much better control of what's going on.
But, if we want to code every animation we want to display on the splash, using UIView.animate(... or any other animation framework it would require a lot (and I mean a lot) of extra work. We need to find an easier way to create these animations.
Lottie: A mega blaster amazing animation Lib
We were already using on our project the Lottie lib, by Airbnb. If you are not familiar with Lottie, it converts a JSON file into a visual animation.
The animations are usually made using Adobe’s After Effects, later converted into a JSON using the Bodymovin plugin.
This gives us an easy way to add super fancy animations on the app — our motion designers can create incredible movable illustrations, and we can display, move, update them on the app with little effort.
So, Lottie is a very useful library, but maybe I didn’t emphasize enough a high point of it, it uses JSONs and JSONs are just good old strings. It means they are easy to store, easy to download, easy to share… easy to everything!
Now we just need to use all the power Lottie gives us inside our Splash Screen.
The multiple screens problem
It's on! We have the design team on our side, everyone is excited to create a totally new experience, and people start having ideas. But suddenly, you are faced with a new issue: the animation placing.
Imagine your motion designer wants to make a rocket to come from the left side of the screen, spin around, and leave on the right side. Chill, they are the ones who are going to animate it, but you still have to place it on the app. And now the issues start to appear.
Positioning the animation is tricky, if you make it go side to side on the screen considering just one device size, it may look weird on a bigger device, because it will start on the middle of the screen and give a not very refined feeling, or worse, it could rescale and become something really big and scary to see.
So, for our first version, we decided to fix an animation size in the middle of the screen, adjust it to multiple screen sizes, but keeping the animation proportions fixed. Giving these constraints to the designers will give animations that can fit on every screen size!
I'm not gonna lie to you, the side-to-side animation will probably be discarded, the animations will need to rely much more on the center of the screen using cross-dissolves and other transitions to appear from the solid background. But hey, this is a initial version, we can totally improve it later 😉.
Storing the animation remotely
We have a lib that allows us to animate everything, we have established standards to our animation run on every device, now we just need to be able to update it whenever we want.
Do you remember that the Lottie animations are just JSONs? You can create an API that returns you the animation based on the current date or simply store it as a file on the Amazon S3 and download it anytime you want!
The trick is: Do not download it during the splash time! Network requests are unpredictable, unreliable… they can basically fail and you would make your user wait on an empty screen for much longer than he would need, just to maybe display an animation. Not a very good solution I have to say.
To overcome this problem, we decided to: download the animation at some time after the splash is loaded, and the next time the app is opened, render the stored animation.
To load a Lottie animation from a JSON is very simple, the very own Animation type is Decodable:
But we actually went a step further, along with the animation JSON we also sent a start and end date, this way we could schedule the animation! Our final model was something like this:
We could even send more than one animation at once, scheduled for different dates, and the app would know which one to render!
Also, using some kind of cache, depending on where you stored your animation, you can prevent it from downloading the same information multiple times and save some bytes from the user's data plan.
Tips and Tricks
- Keep the animation duration small (less than 3 seconds)
This is the thing about splash animations: They have to be fast. In an ideal world, the splash screen would not even exist… and the Xcode would not randomly crash. But as we know, this is not an ideal world.
- The animation itself should not have a background color
It has happened a bunch of times, we decide to add a new animation, and when I'm going to test it, the entire animation frame pops out with a different color than the rest of the background. Unless that's what you want — what I really doubt you do — keep your animations backgroundless.
- The animation must not rely on external assets
While creating the animation on After Effects the designer may add assets, like PNGs, vectors, colors, etc. When exported, these animations will depend on these assets as external files (which we are not ready to handle on our animation download service 😧). But do not fear! The designer can vectorize everything and embed them into the animation's JSON so you don't depend on any external file.
It’s not over yet!
That year’s Christmas is long gone, but the custom splash animation is very much alive! Like any other project, it needs maintenance, updates, improvements… Someday the design team may want to make some super crazy new thing and you’ll need to change it completely — but one thing has already happened: We brought the magic of the Holidays into our app!
And here on iFood we love bringing the magic of commemorative dates to life.
And now that you can change it at any time, what are you going to do? Some fancy doodles like Google? Celebrate important and historical dates? It's up to you.
Animate all the way.
