In the world of web applications, animation provides users with the illusion of motion. While behind the curtain, the animation is only styling changes that happen over time, from its initial to its final state, on HTML elements.
Animations in web applications have been around since the early days of the internet. However, in this time of age where web applications are the main source of information and tools for people in everyday life, animations are an important and integral part when building a web application.
While properly placed and well-timed animations can make our web application look better and more modern, they aren't there just for cosmetic purposes. Movements can make people pay attention. Animation can make users focus their attention on whatever important messages we want to convey to them through our app. Animation can provide users with a satisfying and fluid feeling, while also giving them feedback on their actions, and this keeps them engaged when using our app. It can be as simple as a spinning loader or a more complicated one like the fade-in effect when users scroll the page. In short, animations can increase our app's overall user experience.
On the contrary, too many animations can also make you lose your app's users. Animations should not be overly complicated and mistimed. And more importantly, they should not be an annoyance or a turn-off for your users. Therefore it is a good thing to do UI/UX research for your app when needed.
Angular Animations (
@angular/animations) is a module that is part of Angular itself, and it is built based on CSS functionality. This means all the functionalities that are possible in CSS animations are also possible to do with this module, including transforms, scales, colors, etc.
However, Angular Animations provides users with a better way of controlling or arranging animations. With this module, we can define animation sequences for elements as multiple transformations that occurred over some time. These animations can happen sequentially or in parallel. In terms of performance, Angular Animations is similar to CSS animations. Moreover, with Angular Animations, we can create animations directly without the need of installing third-party or external dependencies.
All of these are some of the many reasons that we think why Angular Animations is a great module to start adding animations to your web application.
Before we start using Angular Animations, we need to do a few steps to set it up.
First, we have to verify that the
@angular/animations package is already installed and listed on the
dependencies part of your
package.json file. Although when you create your project using the CLI, this package should be installed by default.
Second, we need to import
@angular/platform-browser/animations and include it into the imports array of the root module file. See the snippet below.
Third, if we want to give animations to a certain component, we need to import the animation functions that we want in that component's file. These functions are imported from
@angular/animations. See the snippet below.
Finally, in the same component file, we need to include the metadata property
animations:  in its
@Component() decorator. Each of the array elements in this property represents an animation trigger. See the snippet below.
And now we are all set to start creating animations!
Creating a Simple Animation
State and Style
To define a state for the animation, we need to use Angular Animations
state() function. This function has two arguments. The first one is the state name. Angular provides us with three options that we can use:
voidstate. This state is for when the element is not yet part of the DOM, or when it is removed from the DOM.
wildcard (*)state. This state is the default state of the element. In defining transition, this state also means any state.
- Custom state. This state can be any custom name that we defined on the code.
The second one is the
style() function. We use the
style() function to determine a set of CSS styles to associate with the state name.
For this article, we are going to demonstrate creating a simple animation using Angular Animations by creating a snackbar component. With a click of a button, this snackbar will appear with a fade-in and expanding animation and will disappear with a fade-out and shrinking animation when the button is clicked again.
For the states that are needed to create the animations explained above, we will call them
hidden. We will also need a third state which is
void. This is because the snackbar component will face the conditions where it is created but not yet part of the DOM when the page has finished loading, and also when it is removed from the DOM.
visible state, we want to make the snackbar has 1 opacity, transform with a
translate(-50%, 0%) CSS functions. The
scale(1) function creates an expanding effect when the snackbar is opening, while the
translate function is there to make the snackbar appears in the bottom middle of the screen and will have no effect on the animation. See the code snippet below.
void states will have the same styling, so they can be combined into a single
state() function. In these conditions we want the snackbar to have
0 opacity, and transform with a
translate(-50%, 0%). The
scale(0.8) is to create a shrinking effect when the snackbar is closing, while the
translate function is there for the same reason as the
visible state. See the code snippet below.
Transition and Animate
Now that we have our states, it is time to define the transition between these states over some time, so that an "animation" can occur. For this, we are using the
transition() function, which accepts two arguments.
The first one is an expression that defines the direction between two states. Example for the syntax of this expression is:
'someState' => 'anotherState'. This example means that the transition animation will happen when the bound element's state changes from
'anotherState'. Note that the
=> operator is needed between the states.
The second argument is the function
animate(), which is the animation function that will be executed during the transition. This function accepts
styles arguments. The
timings argument can be defined in multiple ways, but for this demo, we will use the
ms unit in string format. The
styles argument can be filled with CSS if we want some style change during the transition.
For this demo, we will make two transition functions. The first one is a transition from any state to the
visible state. We want this transition to happen in
500ms so the animation can be more visible for this demo purpose. See the code snippet below.
The second transition is from any state to the
void state & from any state to the
hidden state. Because we want to create the same transition for these two conditions, we can combine them in a single
transition() function. We want this transition to happen in
250ms. See the code snippet below.
Triggering the Animation
Now that we have our states and transitions, the next thing we need is the trigger to start our animation. For this, we use the
trigger() function that takes two arguments. The first argument is the name of the trigger, where we will use this name to attach it to the triggering element in the HTML template file. While the second argument collects the states and transitions we have made above in an array.
For this demo, we will name the trigger
visibleHidden. We can see the full code below.
The last thing we need to do is to bind the trigger that we defined above to a variable that changes between the
hidden states and attach it to the
div of our snackbar element, preceding it with the
@ symbol inside brackets. See the template file below.
And now the setup & our animation creation is done! We are ready to test it out in the demo section.
Let's see the result of our snackbar component animation below.
As we can see in the video above, when we first click the toggle button, the snackbar shows up on the bottom middle part of the screen with a fade-in and expanding effect. This is the result of the transition from the
* state to the
visible state. During this transition, the styling we defined on the
visible state takes effect, where the opacity of the snackbar gradually increases to 1 and scales up to 100% of its size.
When we click the button again, the snackbar disappears with a fade-out and shrinking effect. This is the result of the transition from the
* state to the
void, hidden state. During this transition, the styling we defined on the
void, hidden state takes effect, where the opacity gradually decreases to 0 and scales down to 80% of its original size.
These animation sequences happen in
250ms for the
hidden state respectively, which are the results of the values that we put on the
animate function of each of its
transition functions. Furthermore, outside demo conditions, these
animate values should be lower so that users can experience much smoother and more fluid animations.
Animation is usually seen as an advanced subject when it comes to building a web application, but the addition of it is a great way to enhance the appearance of your web application. Moreover, animation can also improve the app's overall user experience, which is an essential topic in this modern age where people use web applications for their daily work and activities.
Angular Animations (
@angular/animations) is a great starting point to start adding animations to your web application. This module is included in your Angular project if you created it using the CLI. The animations created with this module are based on CSS, but it provides us with a better way of controlling or arranging those animations.
In this article, we successfully created a simple fade-in and fade-out animation on a snackbar component using Angular Animations. However, what is shown here only shows the surface of what Angular Animations can do. There are still a lot of methods and functionalities that have not been covered yet, and it is certainly capable of creating a more complex, fluid, and beautiful animation than what is shown here.
- Angular documentation: https://angular.io/guide/animations
- Angular Animations Explorer by
Scalability, reliability, and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and if solving hard problems with challenging requirements is your forte, please reach out to us with your resumé at firstname.lastname@example.org.
Halodoc is the number 1 all-around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek, and many more. We recently closed our Series C round and In total have raised around USD$180 million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplifying healthcare for Indonesia.