# 'ion-tabs' animation

**URL:** <https://forum.ionicframework.com/t/ion-tabs-animation/128034>\
**Category:** ionic-v3\
**Created:** [April 16, 2018, 12:56pm UTC](https://forum.ionicframework.com/t/ion-tabs-animation/128034 "2018-04-16T12:56:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Commandoser](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@Commandoser](https://forum.ionicframework.com/u/Commandoser)\
**Post date:** [April 16, 2018, 12:56pm UTC](https://forum.ionicframework.com/t/ion-tabs-animation/128034/1 "2018-04-16T12:56:43Z")

</div>

Hi guys!

I want to add animation between my tabs. When I choose any i want to see fade animation.

```auto
<ion-tabs class="tabs-icon-top tabs-positive fade-in-not-out">
  <ion-tab [root]="tab1" tabIcon="help-circle" ></ion-tab>
  <ion-tab [root]="tab2" tabIcon="checkmark-circle"></ion-tab>
  <ion-tab [root]="tab3" tabIcon="contact"></ion-tab>
</ion-tabs>

```

I tried to use [Animation when transition between tabs in Ionic 2](https://stackoverflow.com/a/44774422) , but that doesn’t work.  
Is it real to do it?

---

<div class="post-metadata">

**Author:** ![Nyxot](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nyxot/32/119082_2.png) [@Nyxot](https://forum.ionicframework.com/u/Nyxot)\
**Post date:** [April 27, 2018, 8:45pm UTC](https://forum.ionicframework.com/t/ion-tabs-animation/128034/2 "2018-04-27T20:45:46Z")

</div>

I hope this can help you

> [@Native transitions "slide" and tabs navigation](https://forum.ionicframework.com/t/native-transitions-slide-and-tabs-navigation/97290/2):
>
> Hi, a few days ago i have the same problem. this is a workaround, i hope you can use it. \<ion-tabs #paymentTabs tabsPlacement='top' selectedIndex="1" (ionChange)="tabChange()"\> \<ion-slides (ionSlideWillChange)="slideChange()"\> \<ion-slide\> \<ion-tab [root]="profileRoot" [rootParams]="tutorial" tabIcon="person"\>\</ion-tab\> \</ion-slide\> \<ion-slide\> \<ion-tab [root]="homeRoot" tabIcon="custom-map-b"\>\</ion-tab\> \</ion-slide\> \<ion-slide\> \<i…

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:40pm UTC](https://forum.ionicframework.com/t/ion-tabs-animation/128034/4 "2021-07-19T21:40:44Z")

</div>

Closed on July 19, 2021, 9:40pm UTC