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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
```typescript import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { trigger, style, animate, transition } from '@angular/animations'; @Component({ standalone: true, imports: [CommonModule], selector: 'app-root, template: ` <div class="card-container"> <div *ngIf="cardIsDisplayed" @fadeSlideInOut class="demo-card"></div> </div> `, animations: [ trigger('fadeSlideInOut', [ transition(':enter', [ style({ opacity: 0, transform: 'translateY(10px)' }), animate('500ms', style({ opacity: 1, transform: 'translateY(0)' })), ]), transition(':leave', [ animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })), ]), ]), ], }) export class AppComponent { cardIsDisplayed = true; toggleCard(): void { this.cardIsDisplayed = !this.cardIsDisplayed; } } ``` |
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 animationfinish– ends the animationrestart– restarts the **paused** animationdestroy– destroys the animationreset– 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 startsonDone– invoked when the animation finishes (either naturally or by calling thefinishfunction on the running animation)onDestroy– invoked after the animation is destroyed (when calling thedestroyfunction)
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
```html <!-- app.component.html –> <div class="animation-demo-container"> <div class="card-container"> <div #demoCard class="demo-card"></div> </div> <div class="demo-controller-container"> <button class="demo-button" (click)="playAnimation()">Play</button> <button class="demo-button" (click)="pauseAnimation()">Pause</button> <button class="demo-button" (click)="stopAnimation()">Stop</button> <button class="demo-button" (click)="resetAnimation()">Reset</button> </div> </div> ``` |
And add some basic styling to our component like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
```scss // app.component.scss .animation-demo-container { border-radius: 0.5rem; border-width: 1px; border-color: rgb(14 116 144); background-color: rgb(30 41 59); display: flex; flex-direction: column; min-height: 350px; overflow: auto; .card-container { flex-grow: 1; padding: 1.25rem; .demo-card { width: 10rem; height: 10rem; border-radius: 0.5rem; background-color: rgb(125 211 252); } } .demo-controller-container { display: flex; flex-direction: row; padding: 1rem 1.25rem; border-radius: 0 0 0.5rem 0.5rem; gap: 0.75rem; .demo-button { background-color: rgb(255, 255, 255); color: rgb(15 23 42); border-radius: 0.25rem; padding: 0.5rem 0.75rem; font-weight: 500; } } } ``` |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
```typescript // app.component.ts import { Component, ElementRef, ViewChild } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ standalone: true, imports: [CommonModule], selector: 'app-root', templateUrl: './app.component.html', styleUrls: [‘./app.component.scss’] }) export class AppComponent { @ViewChild('demoCard') demoCard: ElementRef | undefined; } ``` |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
```typescript // app.component.ts import { Component, ElementRef, ViewChild, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; @Component({ standalone: true, imports: [CommonModule], selector: 'app-root, templateUrl: './app.component.html', styleUrls: [‘./app.component.scss’] }) export class AppComponent { @ViewChild('demoCard') demoCard: ElementRef | undefined; private animationBuilder = inject(AnimationBuilder); private animationPlayer: AnimationPlayer | undefined; private getAnimationPlayer(): AnimationPlayer | undefined { if (!this.demoCard?.nativeElement) { return; } if (!this.animationPlayer) { const factory = this.animationBuilder.build( [ style({ transform: 'rotate(0deg)' }), animate('1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({ transform: 'rotate(360deg)' })) ] ); this.animationPlayer = factory.create(this.demoCard.nativeElement); } return this.animationPlayer; } } ``` |
Lastly, create the play, pause, stop, and reset functions. These functions will then get the AnimationPlayer by calling getAnimationPlayer() and execute their respective functions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
```typescript // app.component.ts import { Component, ElementRef, ViewChild, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations'; @Component({ standalone: true, imports: [CommonModule], selector: 'app-root, templateUrl: './app.component.html', styleUrls: [‘./app.component.scss’] }) export class AppComponent { @ViewChild('demoCard') demoCard: ElementRef | undefined; private animationBuilder = inject(AnimationBuilder); private animationPlayer: AnimationPlayer | undefined; playAnimation(): void { const player = this.getAnimationPlayer(); if (!player) { return; } player.play(); } pauseAnimation(): void { const player = this.getAnimationPlayer(); if (!player || !player.hasStarted) { return; } player.pause(); } stopAnimation(): void { const player = this.getAnimationPlayer(); if (!player || !player.hasStarted) { return; } player.finish(); } resetAnimation(): void { const player = this.getAnimationPlayer(); if (!player || !player.hasStarted) { return; } player.reset(); } private getAnimationPlayer(): AnimationPlayer | undefined { if (!this.demoCard?.nativeElement) { return; } if (!this.animationPlayer) { const factory = this.animationBuilder.build( [ style({ transform: 'rotate(0deg)' }), animate('1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({ transform: 'rotate(360deg)' })) ] ); this.animationPlayer = factory.create(this.demoCard.nativeElement); } return this.animationPlayer; } } ``` |
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.
Leave a Reply