Animating views with Ionic 5 and ion-segment
Tags: ionic, angular, javascript, css
Published: 2020-10-20 20:01:50

---
title: Animating views with Ionic 5 and ion-segment
published: true
description: 
tags: ionic,angular,javascript,css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2ngk3d2b0e5ji30zmipo.png
---


Hey there,

This will be a short one where I just want to show you how you can animate views with Ionic 5 and the awesome `ion-segment` component.

Afterward, you will be able to implement a UI similar to this:

{% twitter 1316798725738635265 %}

So, let's get started.

For the template, we just need an `ion-segment` with two or more `ion-segment-button`, and two separated containers. I'll be using two `ion-list` but feel free to use a `div` or any other element according to your needs.

Now we need to know when one of the `ion-segment-button` is clicked or touched. This is as easy as adding the `ionChange` event listener into the `ion-segment` and pass a user-defined callback. For this example, mine is called `segmentChanged`.

Also, we use `*ngIf` directive to show/hide the `ion-list` according to the `segment` value. We will change the value of this variable when our `segmentChanged` callback is executed, as you will notice in our component file.

```html
<ion-segment (ionChange)="segmentChanged($event)" value="list1">
  <ion-segment-button value="list1">
    <ion-label>
      List 1
    </ion-label>
  </ion-segment-button>
  <ion-segment-button value="list2">
    <ion-label>
      List 2
    </ion-label>
  </ion-segment-button>
</ion-segment>

<ion-list *ngIf="segment === 'list1'">
  <ion-item>
    <ion-label>List 1</ion-label>
  </ion-item>
  ...
</ion-list>

<ion-list *ngIf="segment === 'list2'">
  <ion-item>
    <ion-label>List 2</ion-label>
  </ion-item>
  ...
</ion-list>
```

```js
import { Component } from "@angular/core";

@Component({
  selector: "app-my-page",
  templateUrl: "my-page.page.html",
  styleUrls: ["my-page.page.scss"]
})
export class MyPage {
  
  public segment: string = "list1";

  constructor() {}

  segmentChanged(ev: any) {
    this.segment = ev.detail.value;
  }
}
```

Once you implement the code above, you'll notice that the views are toggled correctly.

But what about the nice animation that we saw in the video?

The trick is to add the [animate.css](https://animate.style/) library into our project and add the animations through CSS classes.

I first learned [this technique](https://devdactic.com/5-animation-packages-ionic/) from [Simon Grimm](https://twitter.com/schlimmson), a well-known expert and developer in the Ionic community.

BTW I highly recommend checking out their website to learn more about Ionic and Angular.

**Animate.css** is installed using a two-step process:

First, open your terminal, navigate to your Ionic project, and run the following:

```bash
npm install animate.css
```

Now open the `src/styles.css` and add the following line to import the `animate.css` library.

```css
@import "~animate.css/animate.min.css";
```

Note: If you don't have a `styles.css` file, try to add the import statement in the global.scss file.

Now, let's go back to our template and add the proper css classes:

```html
<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list1'">
  <ion-item>
    <ion-label>List 1</ion-label>
  </ion-item>
  ...
</ion-list>

<ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list2'">
  <ion-item>
    <ion-label>List 2</ion-label>
  </ion-item>
  ...
</ion-list>
```

And that's it! 😅 You can see the result below:

{% stackblitz ionic-5-ion-segment-animated view=preview %}