Without a doubt, the topic of animations and making them in the User Interface section is a niche one. It’s no wonder because in many cases in the everyday workflow it doesn’t occur, being only an addition. However, there are times when these animations are worth reaching for. When presenting your idea to a client or team, sometimes drawings and words aren’t able to reflect your vivid vision. For UI designers there are already a lot of prototyping applications, simplifying this process, but I have never been convinced to use them. I encourage everyone to learn a program that won’t do the work for us. Why? Because there may be situations when this application will be limited, or maybe we want to do something more than button clicks animation and screen scrolling.
My top 1 when it comes to animation is (classically) Adobe After Effects. This is a program that I approached 5 times before I was able to render anything. I wanted to know how to use it but didn’t know why yet, so I watched powerful animations and wondered how to make them. Each great product is a component of many solutions that we learn over time. I would like to show you how to find in this advanced tool some basic functions that will be useful in the work of a designer, not only for prototyping or micro-interactions but for many tasks.
Introduction to Adobe After Effects
What can thrill you in After Effects is the number of features or plugins. If you are from the days when Adobe Photoshop was essential, you may recall the feeling when you first turned it on. The expansion of applications is one of the attributes of Adobe. The Pareto principle states that 20% of things affect 80% of events – it’s similar in After Effects but in different proportions. 5% of what this powerful application can do will allow us to animate 80% of things that will be useful to us when designing UI.
1. Basic editing capabilities
As for the primary options, we navigate against a bunch of variables.
As we can see, each variable has its values. Anchor Point is the only variable that can be doubtful. It’s a point that is usually the center of an element and all the variables work around it. Let’s say, if you change the Anchor Point to one of the corners of an element and change the Rotation value, the rotation will take place around the Anchor Point and not around the center of the image.
2. Animating an element
Clicking the Time icon on the right side allows us to enable changing values on the timeline through the points we see displayed. These points are either added by editing the property or by clicking on the point selection on the left.
How does it work? If you set two points with values 1000 and 1200 and the duration between these points 5 seconds, the application will lead in a steady linear motion in 5 seconds from 1000 to 1200. Very simple!
This is the absolute basis and it’s enough to show interactions. By editing positions, scales, and rotations, we can show the movements that occur in all applications. When creating my works on Dribble I use these tools 90% of the time but in a slightly expanded form about what you will read in the following paragraphs.
3. Position paths
Changing the position allows you to modify it in a wider range. By default, after selecting two points to move our object, the program will find the easiest and fastest way to overcome from point A to point B. But it’s not always what we want.
After specifying the points on the timeline and the time in which our object should move, we’ve got the simplest line. This is the path along which the object will move. And this path is nothing but a path that you may know from Adobe Illustrator, Figma, or Adobe XD and… we can bend it in many directions!
After bending our path, the anchor point of the object we’re changing the position of will move this way. But it is still just a linear motion, which makes it a bit… stiff.
4. The most important: Graph Editor
Here we’ll take on the stiffness. And most importantly, we’ll do it again along familiar and well-loved paths.
In my object, I change the position and the scales.
As we can see, in the graph editor they are presented as squared. This makes them move equally square. With it, we get the speed of change as a path and we can make these values change at different speeds.
Choosing the indicated option i. e. Easy Ease will already make our movement smooth. We can improve and adjust it to our expectations. It’s best to check different variants and get a feel for the tool yourself. If you need inspiration, the Internet is full of examples and settings.
5. What’s next?
It’s still up to us how we use the options presented above. Take a look at Dribble animation and think if the moves shown there can be done using the above. I guarantee that 70% of the things that look complicated out there are done using these features and how you prepare your project for animation in AE. Here is how I prepared my files for the latest Dribble project which you can find here.
I only exported elements that will have individual interactions and these were mostly Opacity and Position changes.
Do you want to create more advanced projects? I encourage you to check out the tutorials on Youtube which show you how to use more features that AE offers us. From my side, I can recommend checking Trim Path, Masks, and Counter tools.
Do you want to find out more about motion graphics and animations?Talk to us!
Bonus: How the last Dribble Shot was made?
Blender, Adobe After Effects, Figma
The work started in Blender. Blender is a free 3D editing tool and so far the only one I need. I’m a beginner in this subject so it’s hard to say what is better: Cinema, Blender or recently appearing Spline. The range I’m using Blender is completely sufficient.
The model I used is available on the internet for a small fee, but if you search carefully you may find free models of some devices. Remember not to steal someone else’s work especially since 3D is often many hours of work on details!
Blender and element animation options are almost identical to Adobe AE. We have a timeline, points on it, and traversing the path of individual points. Except for that Blender automatically slims down these movements just like our Graph Editor from Adobe AE. In its own way + although I prefer to have full control over that.
After the animation, render settings, I release the project, not as a video animation but render each frame separately! This way in the event of an interrupted render, I’ll know up to which point I’ve already got the frames and saves time in re-rendering.
The rendered frames are thrown into After Effects and combined into one file. Of course, I remember to keep everything without a background!
Then in Figma, I work on the design for the presentation using keyframes that I obtained while rendering from Blender. Of course, I immediately plan how the user movements should look on the page to present the product well. Creating this type of shot makes it necessary to anticipate the last step, i.e. user movements, at the very beginning, i.e. already in Blender. A mistake at this stage will cause a big waste of time. 120 frames of animation or about 3-4 seconds are about 20-30 minutes of rendering on good hardware!
Once the design is approved, we move on to transferring the product to Adobe After Effects.
Here is the list of moves that the elements make:
- Interface elements on the first screen – Change opacity and position in the Y plane (downward movement)
- Interface elements on the second screen – Change opacity and move up
- Headphones – Changing position and size + setting the movement path
In addition, I supplemented with a package of mouse animations which I also have purchased.
And really that’s all. As you can see to show the seemingly complex movements, I didn’t use anything more than a few things that I presented in the above paragraphs! Mastering the usage of the software does not happen overnight, but rather after completing some projects. For further improvement, I can recommend another blog post from my perspective about 9 Ways to Improve your design skills.