Applying motion to mobile applications
Introduction to animations, tools and libraries for designers
If you’ve ever ended up on dribbble or Behance, you may have stumbled upon some amazing looking designs, like animated icons, characters, and transitions. Same goes for us, we’ve seen some fantastic concept animations, but in the fast-paced environment of an agency, it’s tricky to apply them.
In this article you’ll find principles, the tools (what works and what doesn’t) and hints how to approach animation on tight budget projects. Hopefully, the reader finds useful and interesting points from our tests and trials.
The principles of animation
For a start, we needed to take a step back before creating anything. So we did some research on animations rules and how they have been applied to real applications.
The concept of the Twelve Basic Principles of Animation was introduced by Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation. The book and the principles are to this day considered one of the most important works for basing animation. Though it was created with character animations in mind, the rules are still very much relevant when introducing animations to web or app design. For example:
Staging or using animation to guide the user. Originating from theatre, its purpose is to guide the audience’s attention and make clear what’s most important in the scene, by means of light or shadows, character placement or the angle of the camera. We can and already do use the same technique in UI design — placing important action elements so they would gain more attention and by adding animation we could guide the user through more complex actions or bring even more attention to certain actions.
For the rest of the twelve principles, the video below explains them well.
Who’s done it well?
An application that stuck out as taking full advantage of the animation medium is a meditation app called Headspace.
You could say that animation is a vital part of using the environment — the videos explain, in a simple manner, how to proceed a meditation session while the characters and styling set a calm and open mood.
The creators behind Headspace have been able to make engaging, explanatory videos and there’s something to learn from that.
Software
The tool doesn’t make the master. If you know your field, you’re probably able to use anything to achieve your end goal. That’s true, but some tools might save you a lot more time. And if you’re working in a crunch, you should know what’s going to save you time and what might be the best tool to use in the given situation.
Before, it might be useful for you to know what we find important.
What makes a great solution for us:
* Saves time — we can use the same animation wherever we want to.
* Allows animation to code exporting.
* It creates high-quality animations.
* Doesn’t have a steep learning curve
Hence here are the three main types of software we encounter in our daily work and how they hold up to our standards.
Animation software
Animation software allows creating motion frame-by-frame. Each frame is the equivalent of a single drawing, or image. The frames are often created within the software, although most animation software allows them to be brought in from external sources.
For screens, we are using 2D animation software that is created for the sole purpose of animating mobile or web prototypes. You should use it because it’s probably the fastest way to create animations for screens not to mention, one of the easiest to learn for designers.
We tried out a few applications that promote themselves as the premier tools for app prototyping and animation. (This is before the release of Invision Studio and Framer X)
Kite promises to be a powerful animation and prototyping application for Mac & iOS. It includes the capability to generate zero-dependency Swift or Objective-C code from an animation and animation scripting. It works with both sketch and Adobe XD imports and seemed to be a well-rounded application with good iOS and Mac animation support.
The main point is that the learning curve is significant for a person without a coding background.
Framer has currently separated itself from the other two tools named here by not only importing your designs but also allowing you to create designs within the app. So it’s one of the first applications that tried to cover the whole process of UI creation, animation and prototyping. The environment also lets designers export and edit their animations in react native code. The learning curve is a median. There are enough resources to start off quickly though.
Flinto is a tool that aims to cover all your animating needs from animations to transitions throughout your prototype, no matter how many screens you have. The main pro is that the learning curve is small and the capabilities are huge. Even for someone with close to no experience with animations.
The verdict
The winner seemed to be Flinto (this articles cover animation is created using it), mainly for being the most straightforward program to start work with for animation software novices. At the same time we might be inclined towards Framer, but mostly for what Framer X has brought to the game.
Plugins
Plugins are add-ons created by the community for existing software. They allow for extra features the original application might not yet have. Since we mainly use Sketch to develop wireframes and UI, the plugins we tested are for Sketch.
The goal for using plugins is to keep our workflow in one application. Switching between applications or environments is not only time costly but might affect the quality of the design itself. Besides, it’s a cheap way to add more versatility to your main tool.
We tried out two — AnimateMATE and Anima Timeline. Both are also the top results when googling for “animation plugins for sketch”.
AnimateMATE has no visual interface, no preview, just drop downs. The math for object placement and timing needs to be done in the head while hoping the entered info will produce likable results. The preset animations are excellent.
Anima Timeline has a timeline, the animation is previewable and work is very visual. Transition effects and speeds can be easily changed. Sadly it doesn’t work with shapes at all — only with PNGs. The environment slices everything you have on a sketch artboard, so it has very basic animation capabilities (transparency changing and moving the element around).
The Verdict
After some testing, the verdict is, that the better of the two is Animate. It is more suitable for rapid prototyping (page swiping, menus unfolding, elements moving around). But we would not use it on a professional level. The plugins currently available don’t allow for many expressions and are a bit too limited.
Libraries
Libraries are collections of software code that can be reused for different applications or services. They are usually framework or software based and might include templates, component functions, and designs. Libraries have a great value in making the design to code process faster and more efficient.
Simply put, libraries allow for a faster & easier development process . For more fast-paced projects we might find it more reasonable to use pre-made components rather than creating custom designs.
In case of a tight deadline, using a library might let us create more intricate visuals since the design doesn’t need to be implemented from scratch. We tried out a few sources for libraries and a library that branches out to a plugin and application as well.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. The exported file size is relatively small. The learning curve is small if you have a knowledge of After Effects, but it also offers a library of it’s own. It does have limitations such as it doesn’t support some effects so knowing After-Effects well might be necessary .This is possibly the easiest and quickest way to create implementable animations in vector for apps.
CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It also functions as an online code editor and open-source learning environment, where developers can create code snippets (named “pens”), test them and gain inspiration from others. HTML&CSS are relatively easy languages to learn but the learning curve varies person-to-person. It’s a great visual source for animations and components that can be added to web environments. The ability to branch “pens” also allows us to stylise these components according to our needs and include them to our own projects.
GitHub is a distributed version-control platform where users can collaborate on or adopt open source code projects, fork code, and share ideas. In most cases when googling for application or interaction specific questions, you might end up on a Github page with solutions.
For one of our projects, googling for a react native card component did lead us to a library on Github. The library offered a good selection of well-styled transitions to mix and match and modify to our needs and standards. In this case, libraries allowed us to move quickly and still add polished transitions to a project.
The Verdict
Libraries are pretty great and you don’t always need to create everything from scratch. Nevertheless be careful with what you include in your projects — third party content is not always dependable.
Otherwise, all of the three sources above have proven themselves to be reasonable additions to projects when adding animations.
The challenge
As a team in Mobi Lab, we have different skill sets in creating and applying it to applications. Some of us have more experience in motion design and movie creation than others, though we are all probably as interested in using it.
So as our curiosity peaked, we made learning about adding animations to our everyday work, a challenge. For four weeks, our team members looked at the different facets of animations and tried to apply it to their running projects.
From this challenge, in my opinion, we ended up including more animations to our projects which is a very positive outcome. We also found out what tools to avoid, what could work out better for us and where to find more resources.
