# Header Animation

**URL:** <https://forum.inductiveautomation.com/t/header-animation/17017>\
**Category:** General Discussion\
**Tags:** ignition79, scripting\
**Created:** [February 16, 2018, 1:16pm UTC](https://forum.inductiveautomation.com/t/header-animation/17017 "2018-02-16T13:16:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NG1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ng1/32/4712_2.png) [@NG1](https://forum.inductiveautomation.com/u/NG1)\
**Post date:** [February 16, 2018, 1:16pm UTC](https://forum.inductiveautomation.com/t/header-animation/17017/1 "2018-02-16T13:16:13Z")

</div>

I’m trying to animate my header component for a project. The goal is to hover over the top area, or maybe click a downward arrow button that would either expand or hide the top header for a project. What would be the best way to do this?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [February 16, 2018, 1:48pm UTC](https://forum.inductiveautomation.com/t/header-animation/17017/2 "2018-02-16T13:48:20Z")

</div>

I would use a north-docked window as the header. And place a custom item in the menu bar that would toggle its presence.

---

<div class="post-metadata">

**Author:** ![NG1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ng1/32/4712_2.png) [@NG1](https://forum.inductiveautomation.com/u/NG1)\
**Post date:** [February 16, 2018, 3:18pm UTC](https://forum.inductiveautomation.com/t/header-animation/17017/3 "2018-02-16T15:18:39Z")

</div>

I would almost want it to slide up or down, and would prefer not to have to turn it on or off.  
If I toggle it’s presence, is there a way script the header itself to change the size/position of the header?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [February 16, 2018, 5:16pm UTC](https://forum.inductiveautomation.com/t/header-animation/17017/4 "2018-02-16T17:16:13Z")

</div>

Run some experiments changing the height of that window at runtime instead of opening and closing it.