Angular in motion: 4 approaches to animation

@angular/animations is a solid but not the only tool in a toolbox

Motion is an important layer of well designed user interface. Movement indicates that something is changing and, as it’s often said, “motion creates emotion” — a little bit of animation here and there makes an application just more fun to use.

You have probably heard about @angular/animations. They are pretty powerful, but also quite wordy when it comes to the amount of code you need to write when adding them to a component. For some cases there are much simpler solutions, for other the Animations module might even not be enough.

This article is inspired by the excellent post by Issara Willenskomer: “Creating Usability with Motion: The UX in Motion Manifesto”.

I picked one of his examples and decided to implement something similar in Angular.

I ended up using several different approaches, so…
let’s dive in!

1. “Add a class, animate”

The simplest and probably most widely used way of animating things in browser is to:

• Set a transition style (e.g.transition: all 0.2s)
• Define styles for two css selectors (like item and item zoomed)
• Dynamically apply/remove classes to switch between those selectors. In Angular we’d use a class binding ([class.zoomed]="isActive()") or similar solutions, e.g.routerLinkActive="zoomed"

Protip:
Use css animation library, like animate.css, to have some sweet looking animations available just one or two classes away:

Yay, the Jello effect! Sweet!

2. Inline transitions

Often there are much more states in which your interface can end up and the actual values of specific styles are dynamic. In that case inline styling might be the best solution.

For that just set up a style (or ngStyle) binding in your template — just be sure not to put too much logic in the HTML and if it starts to get complicated extract it into the component’s TypeScript code:

3. @angular/animations

If all elements are always there on the screen for us to animate the former ways of moving them might suffice. The problem arises when we want to animate things appearing and, even worse, disappearing from screen.

What is the problem with items being removed? Well, if you delete an item, you remove it from the DOM so there is nothing to make the actual css transition on. If you we wanted to do this by hand we’d need to make our deletion wait for animation to finish…

To help with these (and more!) issues, Angular team provided us with a specific DSL that abstracts this kind of logic from us.
Using @angular/animations we don’t have to figure it out for ourselves.

Some of the effects you can easily achieve with the animation module:

• animating appearance/disappearance
• transitions between different states
• staggering animations
• listen to animation finish event

The official guide is a great primer if you want a solid overview. Once you get acquainted with that, visit this blog post by Matias Niemelä — Mr. Angular Animations himself — for additional knowledge.

In the template we dynamically set the trigger’s value based on we can figure out about routing state from the router outlet.

A side note:
Routing animation is a pretty common example of using Angular Animations and I did show the most popular implementation, but there are two catch that you need to be aware of:

• In a typical implementation the screen moves always in one direction which is not intuitive: if you go from 1st element in a menu to a 2nd, the screen should go “→” and of you go from 2nd to 1st it should move “←”.
• A typical implementation works for transitioning between different components, i.e. going from HomeComponent to ContactComponent works perfectly, but if won’t work for moving from UserDetailsComponent for user 1 to UserDetailsComponent for user 2.

Solving these issues is a bit more demanding and since we still have one more approach to animations to discuss here, I will cover the “improved routing animation” in a separate article (follow me here or on twitter to get notified when it’s published).

Edit: here is the follow-up article: https://medium.com/@tomsu/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b

4. Direct control over Web Animations API

Angular Animations are build on top of Web Animations API and, as an abstraction, they aim to make things easier at the cost of less fine-grained control. If you need a full control, you can use the api directly — it’s not that complex as you may suspect. You just need to:

• define a keyframes array (a list of objects describing style)
• define animation timing (duration, easing, fill — the things you’d define with “classic” css animations

Please don’t judge me on the art direction choices for this demo — I’m a mere developer here, ok? 😉

The finished code for this demo is on GitHub and you can also see it live on StackBlitz: https://stackblitz.com/github/sulco/angular-animation-types

Summary

When it comes to breathing some life into our applications we have many choices. And usually you won’t end up using just one approach.

Remember, you have a rich toolbox at your disposal so pick the right tool for each task so you don’t limit yourself but also don’t overcomplicate things :)

Did you learn something new? If so, you can:

→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts!