Angular - Fade In & Out Animations (Code examples included)


beam-browser-window-with-text

Animations are cool.

In fact, sprinkling your Angular app with a few animations will go a long way when trying to build an impressive, modern Angular web app.

If done well, they give this smooth, gliding feeling as the user navigates through your Angular app.

One of my favorite examples of this is the Angular NGRX Material Starter web app (that was built with Angular of course).

Just remember, use animations wisely. They can be overdone.

So, how do you add fade in and fade out animations to your Angular app?

How are fade in and fade out animations created in Angular?

Angular animations can be a bit confusing if you're used to working with CSS animations.

But they're really not hard to create once you understand the basis.

Let's whip out a keyboard and start coding... 👇 👇 👇

code

First step - enable the animations module

Before we can use Angular animations, we'll have to import and enable the animations module.

Here's how to do it.

Open your module file, usually this would be app.module.ts and import the BrowserAnimationsModule from @angular/platform-browser/animations like this.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we're ready to start creating Angular fade-in and fade-out animations.

1. Text fade out and in animation in Angular

We'll begin by using the Angular CLI to create a demo component.

ng generate component ng-text-animation-demo

Then, we'll open up the new ng-text-animation-demo.component.ts file and replace it with this code.

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-text-animation-demo',
  templateUrl: './ng-text-animation-demo.component.html',
  styleUrls: ['./ng-text-animation-demo.component.css'],
  animations: [
    trigger('fade', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('visible <=> hidden', animate('1s ease-in-out')),
    ]),
  ],
})
export class NgTextAnimationDemoComponent {
  isTextVisible = true;

  toggleText() {
    this.isTextVisible = this.isTextVisible ? false : true;
  }
}

And then in the ng-text-animation-demo.component.html we'll use this code (it's a bit wonky, I know).

<div [@fade]="isTextVisible ? 'visible' : 'hidden'">
  <p>
    Why did the Angular developer refuse to work with TypeScript?
  </p>
  <p>Because he didn't want to be Type-cast!</p>
</div>
<button (click)="toggleText()">Toggle</button>

So... what the weirdness did we just create?

In summary, we created a CSS animation that is bound to our application state.

And it gets triggered when the state of our app changes.

2. Image fade out and in animation in Angular

It's just as easy as the example above. ☝️

Here's the code for our components Typescript file.

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-text-animation-demo',
  templateUrl: './ng-text-animation-demo.component.html',
  styleUrls: ['./ng-text-animation-demo.component.css'],
  animations: [
    trigger('fade', [
      state('visible', style({ display: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('visible <=> hidden', animate('1s ease-in-out')),
    ]),
  ],
})
export class NgTextAnimationDemoComponent {
  imageVisible = true;
}

And our components template file.

<img src="https://danielk.tech/user/themes/zenita/img/favicon.webp" alt="Daniel Kreider" [@fade]="imageVisible ? 'visible' : 'hidden'">
<button (click)="this.imageVisible == false ? this.imageVisible = true : this.imageVisible = false">Toggle</button>

Fading out...

And that, my friend is how you do fade-in and fade-out CSS animations in Angular.

To summarize, you create an Angular animation by creating a trigger that has multiple states, like visible and hidden, and then you finish by declaring a transition between those two states.

For a deeper dive into Angular animations I recommend checking out the Angular animation docs.

Till later,

Daniel Kreider

signature

Credits