How To Create Angular Slide Animations: Simple Examples For Beginners

Animations are cool.

And a few animations sprinkled here and there inside of your Angular app will dramatically improve the feel and experience of your users.

Today I'm going to show you how to create slide in and slide out animations in Angular.

You can use these animations on all kinds of HTML elements.

• Images
• Text
• Headings
• Buttons
• Lists
• And More.

How to slide an element in and out from left in Angular

We'll create a simple component called image-animation-demo.

ng generate component image-animation-demo

We'll open the component's Typescript file and create the slideInLeft animation as well as a toggle function.

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

@Component({
  selector: 'image-animation-demo',
  templateUrl: './image-animation-demo.component.html',
  styleUrls: ['./image-animation-demo.component.css'],
  animations: [
    trigger('slideInLeft', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('500ms ease-out', style({ transform: 'translateX(0)' })),
      ]),
      transition(":leave", [
        animate('500ms ease-out', style({ transform: 'translateX(-100%)' })),
      ])
    ])
  ],
})
export class ImageAnimationDemoComponent {
  imageVisible = true;

  toggleImage() {
    this.imageVisible == false ? this.imageVisible = true : this.imageVisible = false
  }
}

And the HTML.

<img src="https://danielk.tech/user/themes/zenita/img/favicon.webp" alt="Daniel Kreider" [@slideInLeft] *ngIf="this.imageVisible">
<button (click)="toggleImage()">Toggle</button>

How to slide an element in and out from the right in Angular

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

@Component({
  selector: 'image-animation-demo',
  templateUrl: './image-animation-demo.component.html',
  styleUrls: ['./image-animation-demo.component.css'],
  animations: [
    trigger('slideInRight, [
      transition(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('500ms ease-out', style({ transform: 'translateX(0)' })),
      ]),
      transition(":leave", [
        animate('500ms ease-out', style({ transform: 'translateX(100%)' })),
      ])
    ])
  ],
})
export class ImageAnimationDemoComponent {
  imageVisible = true;

  toggleImage() {
    this.imageVisible == false ? this.imageVisible = true : this.imageVisible = false
  }
}

And the HTML.

<img src="https://danielk.tech/user/themes/zenita/img/favicon.webp" alt="Daniel Kreider" [@slideInRight] *ngIf="this.imageVisible">
<button (click)="toggleImage()">Toggle</button>

How to slide an element in and out from the top in Angular

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

@Component({
  selector: 'image-animation-demo',
  templateUrl: './image-animation-demo.component.html',
  styleUrls: ['./image-animation-demo.component.css'],
  animations: [
    trigger('slideInTop, [
      transition(':enter', [
        style({ transform: 'translateY(-100%)' }),
        animate('500ms ease-out', style({ transform: 'translateY(0)' })),
      ]),
      transition(":leave", [
        animate('500ms ease-out', style({ transform: 'translateY(-100%)' })),
      ])
    ])
  ],
})
export class ImageAnimationDemoComponent {
  imageVisible = true;

  toggleImage() {
    this.imageVisible == false ? this.imageVisible = true : this.imageVisible = false
  }
}

And the HTML.

<img src="https://danielk.tech/user/themes/zenita/img/favicon.webp" alt="Daniel Kreider" [@slideInTop] *ngIf="this.imageVisible">
<button (click)="toggleImage()">Toggle</button>

How to slide an element in and out from the bottom in Angular

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

@Component({
  selector: 'image-animation-demo',
  templateUrl: './image-animation-demo.component.html',
  styleUrls: ['./image-animation-demo.component.css'],
  animations: [
    trigger('slideInBottom', [
      transition(':enter', [
        style({ transform: 'translateY(100%)' }),
        animate('500ms ease-out', style({ transform: 'translateY(0)' })),
      ]),
      transition(":leave", [
        animate('500ms ease-out', style({ transform: 'translateY(100%)' })),
      ])
    ])
  ],
})
export class ImageAnimationDemoComponent {
  imageVisible = true;

  toggleImage() {
    this.imageVisible == false ? this.imageVisible = true : this.imageVisible = false
  }
}

And the HTML.

<img src="https://danielk.tech/user/themes/zenita/img/favicon.webp" alt="Daniel Kreider" [@slideInBottom] *ngIf="this.imageVisible">
<button (click)="toggleImage()">Toggle</button>

Sliding out...

And that is 4 different ways you can create slide in and slide out animations in Angular.

If you have any questions don't hesitate to reach out.

Sliding out...

Angular Consultant