# Nav animations for ion-footer-bar and ion-header-bar

**URL:** <https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645>\
**Category:** ionic-v3\
**Created:** [June 23, 2016, 3:36pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645 "2016-06-23T15:36:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![shinglesmingles](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@shinglesmingles](https://forum.ionicframework.com/u/shinglesmingles)\
**Post date:** [June 23, 2016, 3:36pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/1 "2016-06-23T15:36:00Z")

</div>

Hi everyone. I’ve been having a great time creating with Ionic 2 so far 🙂 Just want to put forth my question to the community as I’m out of answers.

I am trying to create pages that have a static header/footer along with a scrollable list. After many attempts at sizing said list (including fiddling with the DOM) I have settled on an ion-header-bar approach.

Here’s a very rudimentary, stripped down template:

```
<ion-navbar *navbar primary>
    <ion-title>Chat</ion-title>
</ion-navbar>
    
<ion-content>
    <!--Chat messages here-->
</ion-content>

<ion-footer-bar>
    <!--Chat Input Here-->
</ion-footer-bar>

```

With this approach, I run into the unintended side effect that there are no animations on the footer or header bar. Using `this.nav.push` or `this.nav.pop` results in it staying static while `ion-content` (and `ion-navbar`) moves.

Also, after some testing, I found out that if the footer bar is wrapped in `ion-content`, it will animate properly. However, it will then scroll with the rest of the content.

Anyone have a solution or different approach to this problem? As a backup, I have my DOM hack but I really don’t wish to use it if possible. Thanks!

---

<div class="post-metadata">

**Author:** ![shinglesmingles](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@shinglesmingles](https://forum.ionicframework.com/u/shinglesmingles)\
**Post date:** [June 24, 2016, 1:08am UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/3 "2016-06-24T01:08:46Z")

</div>

With further testing, I have found that this affects only the ios transitions. Android transitions are not affected (because they move along the Y axis while iOS moves along the X axis?) Not really sure how this works. Any feedback is appreciated!

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [August 16, 2016, 4:23am UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/4 "2016-08-16T04:23:50Z")

</div>

Have you ever figured this out? I am facing the same issue.

@mhartington do you know how we can have the animation applied to custom elements as well in ion-header/ion-footer on iOS?

Thanks for your help.

---

<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:** [August 16, 2016, 4:13pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/5 "2016-08-16T16:13:11Z")

</div>

This should be possible now with beta 10/11. I have tested this personally and have the navbar, toolbars, footers,etc all animating correctly

---

<div class="post-metadata">

**Author:** ![shinglesmingles](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@shinglesmingles](https://forum.ionicframework.com/u/shinglesmingles)\
**Post date:** [August 16, 2016, 4:25pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/6 "2016-08-16T16:25:25Z")

</div>

Hi there. The short answer is no unfortunately. Haha.

I have found the only workaround to be using `pageTransition: "md-transition"` in IonicConfig (app.ts).

---

<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:** [August 16, 2016, 5:35pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/7 "2016-08-16T17:35:15Z")

</div>

No, this is possible with beta10/11. Again, I have tested this personally

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [August 16, 2016, 8:14pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/8 "2016-08-16T20:14:24Z")

</div>

Hey @mhartington,

Thanks for answering. I tried with beta 11 and the nightly build but no luck. I tried with a custom component like:

```auto
<ion-footer>
  <my-component></my-component>
</ion-footer>

```

`<my-component>` does not follow the iOS animation. This component could be a simple `<div>`.

Can you please share some code if you have a working version?

Thanks

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [August 16, 2016, 8:20pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/9 "2016-08-16T20:20:26Z")

</div>

@mhartington,

try the following footer code with the iOS transition:

```auto
<ion-footer>
  <div style="height: 40px; width: 100%; background: red;">custom component</div>
</ion-footer>

```

You will see that the red div after right away and does not follow the transition.

Is that a bug?

---

<div class="post-metadata">

**Author:** ![shinglesmingles](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@shinglesmingles](https://forum.ionicframework.com/u/shinglesmingles)\
**Post date:** [August 17, 2016, 1:42pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/10 "2016-08-17T13:42:15Z")

</div>

Just tried it again with code similar to the above post by @dbaq. I can confirm this is not working in Beta 11. If there is a `<div>` in `<ion-header>` or `<ion-footer>` it does not transition correctly with iOS.

My guess (and I’m probably wrong) is that the transition looks for the `<ion-navbar>` and `<ion-content>` or `<scroll-content>` and applies the animation to them, leaving out anything else.

---

<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:** [August 18, 2016, 7:32pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/11 "2016-08-18T19:32:39Z")

</div>

Ok, with the custom components, it’s a bit different.

With the way that view animations work, they actually need to know what elements to animate.  
They animate the inner elements, and not the `ion-header` or `ion-footer`

So custom components will not be supported for this.

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [August 18, 2016, 8:59pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/12 "2016-08-18T20:59:01Z")

</div>

Thanks @mhartington for the explanations. How can we make that work then? Do we need to wrap it inside a `<ion-toolbar>` for instance?

Why is the animation not applied to all inner elements?

Thanks for your answers

---

<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:** [August 18, 2016, 9:32pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/13 "2016-08-18T21:32:33Z")

</div>

It’s not applied to all inner elements because different elements have different animations

Yes, wrap it in a ion-toolbar

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [August 18, 2016, 11:00pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/14 "2016-08-18T23:00:09Z")

</div>

That’s a solution. It looks like it is working even though I noticed some glitches during the transition (my component contains an ion-grid). I need to dig into it and will open another issue.

IMHO, it is counter intuitive to not animate all inner elements during a transition. If some components have a different animations, they should override the default animation.

Thanks for your time 👍

---

<div class="post-metadata">

**Author:** ![cmaissan](https://avatars.discourse-cdn.com/v4/letter/c/d26b3c/32.png) [@cmaissan](https://forum.ionicframework.com/u/cmaissan)\
**Post date:** [September 1, 2016, 8:51pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/15 "2016-09-01T20:51:44Z")

</div>

I was able to get around this by adding the custom element (in my case an icon) to the view’s `navbarItemRefs` and `toolbarRefs` lists in the `ionViewLoaded` hook. They are then animated during the transition.

```
  ionViewLoaded(){
    let element = new ElementRef(document.querySelector('ion-header ion-icon[custom]'));
    this.view.getNavbar().addItemRef(element);
    this.view.setToolbarRef(element);
  }

```

I’m not sure if this is kosher. I haven’t noticed any adverse side effects.

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [November 20, 2016, 6:53pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/16 "2016-11-20T18:53:32Z")

</div>

@mhartington,

the ion-toolbar trick does not work anymore. I updated my component from 2.0.0-beta.11 to 2.0.0-rc.3 and the component is not animated anymore.

I haven’t changed the structure of my component at all since beta.11.

You can reproduce it by using a component the following way:

```
<ion-footer>
  <my-component></my-component>
</ion-footer>

```

my-component’s template:

```
template: `
  <ion-toolbar>
    <div style="height: 40px; width: 100%; background: red;">custom component</div>
  </ion-toolbar>
`,

```

What should be done now to have my component to follow the main animation?

thanks for your help.

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [January 5, 2017, 4:42am UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/17 "2017-01-05T04:42:51Z")

</div>

Updated to the RC4 and it is still happening. Any help would be appreciated. Thanks.

EDIT: if the ion-toolbar is inside a custom component, it is not animated anymore. If I wrap my custom component with an ion-toolbar, it is animated, but I am trying to ship a custom component where I can’t do that.

---

<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:** [January 5, 2017, 4:30pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/18 "2017-01-05T16:30:41Z")

</div>

Can you make a sample project with this setup?  
You should be able to animate that in the footer, since the animation targets them.

> <https://github.com/ionic-team/ionic/blob/e98466128d0649ebc652e56936dec6982fd4349d/src/transitions/transition-ios.ts>

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [January 7, 2017, 10:36pm UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/19 "2017-01-07T22:36:48Z")

</div>

Hey @mhartington,

I made you a github repo so you can see the issue. Please take a look at [https://github.com/dbaq/ionfooteranimation-issue](https://github.com/dbaq/ionfooteranimation-issue), you can also check this out on ionic view: 04765748 (with iOS only, android works).

The difference between page2 and page3 is that I am using a custom component:

page2:

> <https://github.com/dbaq/ionfooteranimation-issue/blob/master/src/pages/page2/page2.html#L12-L14>

custom component:

> <https://github.com/dbaq/ionfooteranimation-issue/blob/master/src/components/custom.ts#L5>

page3:

> <https://github.com/dbaq/ionfooteranimation-issue/blob/master/src/pages/page3/page3.html#L12-L14>

The result is that page2 footer content is not animated, page3 is.

What should I do in this case?

Thanks for your help.

---

<div class="post-metadata">

**Author:** ![dbaq](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@dbaq](https://forum.ionicframework.com/u/dbaq)\
**Post date:** [January 11, 2017, 2:26am UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/20 "2017-01-11T02:26:38Z")

</div>

Opened a github issue as I believe it is a bug: [https://github.com/driftyco/ionic/issues/9947](https://github.com/driftyco/ionic/issues/9947)

---

<div class="post-metadata">

**Author:** ![philipgriffin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/philipgriffin/32/110462_2.png) [@philipgriffin](https://forum.ionicframework.com/u/philipgriffin)\
**Post date:** [June 8, 2017, 1:06am UTC](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645/21 "2017-06-08T01:06:03Z")

</div>

@dbaq I don’t suppose you had a solution to this in the end? I’m facing the same issue.

[Next page](https://forum.ionicframework.com/t/nav-animations-for-ion-footer-bar-and-ion-header-bar/55645.md?page=2)