Designing a Custom Loader
In this post, I’ll be talking about how to create a custom loader in After Effects and export it to a .json file using a plugin called Bodymovin.
For a user of an app or website, a “page loading” icon may be the smallest of your concerns. But as a designer with betterPT, I’ve found that carefully curating small details like this actually goes a long way towards cultivating a more amenable user experience.
When I started thinking about how to create my loader, I knew that I wanted something easily identifiable with our brand, so I started playing with our logo (which curiously resembles Da Vinci’s Vitruvian man) in After Effects.
As an animation, I really liked my first iteration, but as our CTO Damian pointed out, it takes quite a while for the animation to run from start to finish. For fast loading pages, the loader was going to get cut off halfway through its animation cycle.
Back to the drawing board, I tried a second, faster version. And failed miserably. This loader nearly gave Damian an epileptic fit.
I finally settled on a spinner that sends our Vitruvian man’s head clockwise round the two arrows that comprise the body, all in exactly one second. I liked it. The circular movement evoked the hands of a clock and the back-and-forth of the arrows echoed the subtle palpitations of a heart.
In terms of execution, the process was fairly simple.
The first step was to create a project in After Effects with an artboard that fit the dimensions of our logo. I went with a square artboard at 1000px.
The second step was to define a frame rate. I’ve always preferred 25fps because it divides up easily and makes for lighter files.
The third step was to import my imagery. It’s important to have whatever images you’re using in vector files for two main reasons:
- They can scale to whatever size you want.
- They can be translated into a .json file through Bodymovin further down the line.
It’s also important to work with simple shapes, which go a long way towards making your files small and nimble for export. In my case, I divided our Vitruvian man into three vector shapes in Illustrator: His head (Layer 1), the arrow that makes up his right side (Layer 2), and the arrow that makes up his left side (Layer 3). Import the image as a composition into After Effects and voilà, your motion project will respect the layers as well.
After that, it’s animate away.
For the Vitruvian head, I first set its anchor point at the center of the circle whose path it was going to trace and then set it to lift up in position after 5 frames, rotate 360° around its anchor point in the next 15 frames, and then drop in the next 5 frames. A full loop from start to finish in exactly one second.
Word to the wise: I also set the Vitruvian head’s curves so that it would accelerate at the beginning of the animation and decelerate at the end. Why? To set the loader in motion so that it jumps out at you right away.
For the two arrows, I just set them to move from side to side, and go from 100% to 60% opacity over the course of the Vitruvian head’s 360° trajectory. By adding the expression (loopOut“pingpong”) to the arrows’ position and opacities, all you need is to set the opening and the closing keyframes, and the arrows will loop out the animation for all eternity.
Using the “B” and “N” keyboard shortcuts, I set the animation to open at 0 frames and close at 25, making sure the animation looked exactly the same in its initial state as in its final state, for optimal looping. I saved it, ran the Bodymovin plugin (Window–Extensions–Bodymovin) and then passed the data.json file off to our iOS developer Jim to implement in our app using the Lottie library. All in all, a smooth experience, and one that perfectly reflected the synergy between design and development that we aim for at betterPT.
After the adventure, I drew three conclusions about what makes for a good loader:
- It must be playful and reflect your brand.
- It must be a quick and simple animation.
- It mustn’t be too hard on the eyes.
By following these three principles, I think you can create a good custom loader that adds value to your app or website. After all, when it’s all said and done, how many hours of our lives do we spend staring at a screen, waiting for a page to load? And as Andy Warhol asked, “isn’t life a series of images that change as they repeat themselves?” Might as well make them worth it.
