Back to the homepage

Controlling Angular Animations Programmatically

Animations play an important role in user experience. Not only do they add a level of polish to your website, but they also have practical applications. They’re pretty common, so it’s important for Angular developers to be familiar with how to add them to applications. 

In this article, I will go over how to control Angular animations with programming in order to improve user experience and achieve success with the application. 

What is the Purpose of Using Animations?

Many businesses use animations to help guide the user through their application, helping convey information and explain simple processes to the users. 

Common examples of this are hover and click animations. Apart from your cursor turning into a pointer, adding hover animations to clickable elements is a quick way to tell the users that the element they’re hovering on is clickable. The click animations (e.g. Angular Material’s ripple effect on buttons), on the other hand, provides immediate feedback to the user that the application has registered their action.

How Do You Add Animations to an Angular Application?

There are numerous ways to add animations to your Angular application, including a built-in animations module which you can use without installing any additional dependencies.

Angular Animations are commonly used via the animations array in the Component decorator. These animations are then triggered by adding the animation directives (prefixed by @, such as @slideIn or @fadeOut) to the target element. The code snippet below should look familiar when using Angular Animations.

This approach covers most use cases and is a convenient way to add animations to your Angular applications.

How Do You Edit Angular Animations?

Angular Animations includes an AnimationBuilder class which we can use to build and play with Angular Animations programmatically.

In addition to the core functionalities of Angular Animations, programmatic animations via Angular’s AnimationPlayer contain additional functions to control the animations that are not possible using the template approach. These functions include:

  • pause – pauses the animation
  • finish – ends the animation
  • restart – restarts the **paused** animation
  • destroy – destroys the animation
  • reset – resets the animation to its initial state

The AnimationPlayer class also provides callbacks for key events of the animations, such as:

  • onStart – invoked when the animation starts
  • onDone – invoked when the animation finishes (either naturally or by calling the finish function on the running animation)
  • onDestroy – invoked after the animation is destroyed (when calling the destroy function)

You could also pass a callback to the beforeDestroy function if you want to run code before the animation is destroyed.

Basic Usage

Let’s look at how we can use AnimationBuilder and AnimationPlayer to run our Angular Animations.

Start with creating the target element and a few buttons to control the animations.

And add some basic styling to our component like this:

Let’s move on to the animations part. First, we will need to get a reference to the target element. We’ll use Angular’s ViewChild decorator and pass in the target element’s identifier (#demoCard), which we defined earlier, to access the target element.

Inject the AnimationBuilder class and create a private function to build the animation and create the AnimationPlayer instance we’ll be using to run our animations.

Lastly, create the play, pause, stop, and reset functions. These functions will then get the AnimationPlayer by calling getAnimationPlayer() and execute their respective functions.

If you’ve followed along, you should end up with the following animations:

You can visit Angular Animations Explorer to see the live demo of this animation approach.

Wrapping Up

There are multiple ways to use Angular Animations, each with its ideal use cases. If you only need to execute your Angular Animations, opt for the simpler template approach. However, if you need more fine-grained control over your animations, use the programmatic approach using AnimationBuilder and AnimationPlayer to execute your Angular Animations. You can also check out Angular Animations Explorer to see other approaches to adding animations to your Angular applications.

If you are interested in more content like this or have any questions, let me know in the comments or tweet me at @williamjuan27.


About the author

William Juan

I am a Frontend Developer working primarily in the web and hybrid mobile spaces. The majority of my work has revolved around the Angular ecosystem, including working with other Angular-related frameworks such as NativeScript and Ionic.

Don’t miss anything! Subscribe to our newsletter. Stay up-to-date with the latest trends, tips, meetups, courses and be a part of a thriving community. The job market appreciates community members.

Leave a Reply

Your email address will not be published. Required fields are marked *