#angularanimations

[websoptimization]

Animations in Angular: Bring Your Web Apps to Life

There is nothing worse than a dull, boring webpage. It is the animations that make the modern web apps feel live, attractive & Interactive. They help users, give visual feedback and with overall user experience. 

Ever asked yourself how to create smooth and efficient animations in your Angular apps, you are here just in the right spot!

Angular features a built-in animation module which provides users an effortless way to create both complex and simple animations. Angular provides comprehensive features for fade-in effects and motion animations. Angular has got you covered!

So, let’s dive into how you can use animations in Angular to make your web applications more dynamic and user-friendly.

Understanding Angular Animations

Before we jump into the coding part, let’s understand how Angular animations work. Unlike traditional CSS animations, Angular’s animation system is more structured and dynamic. 

It integrates seamlessly with Angular’s component-based architecture, making it easier to manage and optimize animations.

Angular animations rely on the @angular/animations module, which provides a way to define animations using TypeScript instead of CSS keyframes. This means more control, better performance, and deeper integration with Angular’s lifecycle methods.

Why Use Angular Animations Over CSS?

More control: Angular animations can respond to state changes dynamically, unlike static CSS animations.

Optimized performance: Angular automatically removes animations from elements that are no longer in the DOM.

Easier to manage complex animations: You can control animations using Angular’s lifecycle hooks and events.

Setting Up Angular Animations

To get started, you need to install and import the animations module. Here’s how:

Step 1: Install and Import the Animations Module

Angular animations are included by default in Angular projects, but you need to explicitly import them in app.module.ts:

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

@NgModule({

  imports: [

    BrowserAnimationsModule, // Import this module

  ],

})

export class AppModule {}

Step 2: Define Basic Animation in a Component

Now, let’s create a simple fade-in effect:

import { Component } from '@angular/core';

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

@Component({

  selector: 'app-fade',

  template: `<div @fadeInAnimation>Welcome to Angular Animations!</div>`,

  animations: [

    trigger('fadeInAnimation', [

      transition(':enter', [

        style({ opacity: 0 }),

        animate('500ms ease-in', style({ opacity: 1 }))

      ]),

    ]),

  ],

})

export class FadeComponent {}

What’s happening here?

trigger(‘fadeInAnimation’) defines an animation trigger.

transition(':enter') applies the animation when the element is added to the DOM.

style({ opacity: 0 }) starts the animation with full transparency.

animate('500ms ease-in', style({ opacity: 1 })) animates the opacity to 1 over 500ms.

And just like that, you’ve created a fade-in effect! 

Key Angular Animation Concepts

To create more advanced animations, you need to understand a few core concepts:

1. Triggers and States

Triggers define an animation and can have multiple states. Example:

trigger('toggleState', [

  state('open', style({ height: '200px', opacity: 1 })),

  state('closed', style({ height: '0px', opacity: 0 })),

  transition('open <=> closed', animate('300ms ease-in-out')),

])

2. Transitions

Transitions define how elements move from one state to another.

3. Keyframes

For complex animations, you can use keyframes:

animate('1s', keyframes([

  style({ transform: 'scale(1)', offset: 0 }),

  style({ transform: 'scale(1.5)', offset: 0.5 }),

  style({ transform: 'scale(1)', offset: 1 }),

]))

4. Staggering Animations

When animating multiple elements, you can add stagger effects:

query(':enter', [

  stagger('100ms', [animate('500ms', style({ opacity: 1 }))])

])

Creating Different Types of Animations in Angular

Let’s explore some cool animations you can add to your app:

1. Slide Animation (Left, Right, Up, Down)

trigger('slideAnimation', [

  transition(':enter', [

    style({ transform: 'translateX(-100%)' }),

    animate('500ms ease-out', style({ transform: 'translateX(0)' }))

  ]),

])

2. Scaling and Zooming Effects

trigger('scaleAnimation', [

  transition(':enter', [

    style({ transform: 'scale(0)' }),

    animate('300ms ease-in', style({ transform: 'scale(1)' }))

  ]),

])

3. List Animations (Adding & Removing Items Dynamically)

trigger('listAnimation', [

  transition(':enter', [

    style({ opacity: 0 }),

    animate('300ms ease-out', style({ opacity: 1 }))

  ]),

  transition(':leave', [

    animate('300ms ease-in', style({ opacity: 0 }))

  ]),

])

Optimizing Angular Animations

Use ChangeDetectionStrategy.OnPush for better performance.

Limit heavy animations on slow devices.

Use Angular’s built-in tools to debug animations.

Conclusion

By now, you should have a solid understanding of how Angular animations work and how to implement them effectively. Whether you're adding subtle UI effects or complex motion designs, Angular’s animation module provides a powerful and flexible way to enhance user experience.

So go ahead—experiment, tweak, and bring your web applications to life with stunning animations! 

If you're still unsure how to implement animations in your project, hire AngularJS developers to seamlessly integrate them for a smooth and engaging user experience.

[mbaljeetsingh]

How to Use Animation in Angular 6

In this tutorial, you'll learn about the importance of animations to improve user experience. I'll show you how to incorporate animations in Angular 6 applications with the help of animation components and Bootstrap.

The Role of Animations in User Design

Most web users are visual creatures and therefore respond to visual objects. This means that as a designer, you have to find a way to incorporate animations in your designs. Animation can prove to be a useful tool when it comes to user interaction in your website or app. However, this doesn't mean that when you use animation, users will be attracted to your site. You have to strike a balance on the number of animations used at a particular place and time. Let's look at some scenarios in which animation can prove useful in user design.

Providing Feedback: Animation can be used to acknowledge that a particular action has been received by the system. For example, when a user enters the wrong information you can use the shake animation to let them know they need to enter their credentials again.

Demonstration: Animation can also be used to demonstrate how certain aspects of applications work. This is done by providing visual hints which serve to teach users how the different UI elements operate.

Transitions: Transition animation helps the user not lose focus of where their attention should be. When incorporating transition animations, keep in mind that the process should be smooth and effortless.

Animation States and Transitions

Before we get started on adding animations into our Angular application, let's first look at the different animation states and transitions available in Angular.

These are the main states in Angular animations:

void state: an element which is not in the view is represented by the void state

wildcard (*) state: this represents any state

We will look at how these fit in an actual app when we start coding.

In order for an animation to change from one state to another, it needs to transition. The transition event  has its own properties which include:

Duration: this property defines the life of an animation. This means from the start of the animation to the time it finishes.

Delay: this property is used to define the time between the start of the actual transition and the time it is triggered.

Easing: this property controls changes in the speed of an animation. An animation can start out slow and accelerate as it progresses and vice versa.

Setting Up an Angular 6 Project

We will start by initializing a new Angular application as follows:

ng new angularAnimation

The next thing will be to enable animations by importing the   BrowserAnimationModule module  in app.module.ts as shown below. 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Any animation functions that will be used are then imported  from @angular/animations in the component file as follows:

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

Define the Animations

Finally, you define all your animations in the components decorator as shown.

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']. animations: [ trigger('trigger1', [ //state and transitions go here ]), trigger('trigger2', [ //state and transitions go here ]), ] )

The animation property is usually an array that contains one or more triggers as defined above. Each trigger, in addition, has a state and transition functions.

A simple animation property would look like this:

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [ trigger('changeBtnColor', [ state('state1', style({ backgroundColor: 'yellow', })), state('state2', style({ backgroundColor: 'pink', border:'1px solid #18ab29', height: '100px', width: '200px' })), transition('state1=>state2', animate('1000ms')), transition('state2=>state1', animate('1000ms')) ]), ] })

In the above animation, the name of the trigger is, changeBtnColor and we have two states: state1 and state2. Our element will be yellow in state1 and our animation will change its size as well as color when transitioning to state2.

Hook an Element to an Animation Trigger

Lets now hook our element to the trigger in the template as shown below.

<h3>Change color Animation</h3> <button class ="my_button" (click)="changeState()">Click here</button> <hr> <button [@changeBtnColor]=current class ="mybutton" (click)="changeState()">Change Color</button> <br />

Now go back to the component and define the function that listens to the button click.

export class AppComponent { title = 'Animations in Angular'; current = 'state1'; changeState() { this.current = this.current === 'state1' ? 'state2' : 'state1'; } }

Below are the before and after transformations of the animation.

Now that we have mastered the basics of Angular animation, let's go a little more in-depth with another example. In the next example, we will add animation to list items.

Animating List Items

Now open app.component.ts and update it as follows:

export class AppComponent { title = 'Animations'; mylist = []; addElement() { this.mylist.push('This list is animated'); } removeElement() { this.mylist.length -= 1; } }

Here, we create an empty list and create a function for adding elements to the list and another for removing elements from the list.

Next, we will add the elements that will be applied to the animations. Update the template as follows:

<h3>Enter and Leave animation</h3> <a (click)="addElement()" href="#" class="myButton">Add List</a> <a (click)="removeElement()"href="#" class="myButton">Remove List</a> <div style="width:200px; margin-left: 20px"> <ul> <li *ngFor="let list of mylist"> </li> </ul> </div>

We will start adding animations in the component. Open app.component.ts and add the following animations in the component decorator.

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [ trigger('AnimateList', [ transition(':enter', [ style({opacity: 0, transform: 'translateY(-75%)', offset: 1.0}), animate('0.2s 600ms ease-in') ]), transition(':leave', [ animate('1.2s ease-out', style({opacity: .5, transform: 'translateY(35px)', offset: 0.3}) ]), ]) ] })

Here we have a trigger called AnimateList which has the :enter and :leave aliases.  enter represents the transition from void to * (void => *), while :leave represents the transition from * to void (* => void). During the :enter transition, the animation will wait for 600ms and run for 0.2s. Theleave transition will wait for 0.1s and run with no delay.

We now need to update the template to use the animation we have defined above. The list items in app.component.html should look like this:

<div style="width:200px; margin-left: 20px"> <ul> <li *ngFor="let list of mylist" [@AnimateList]> </li> </ul> </div>

The final demo of the application should run as shown below.

Conclusion

This tutorial has covered all that is necessary to get started with your own animations in Angular. For more information head over to the animations guide and explore the full power of animations in Angular. 

via Envato Tuts+ Code http://bit.ly/2FDUvDH