# Animation header
**URL:** https://forum.readymag.com/t/animation-header/3520
**Category:** Custom code
**Created:** [September 11, 2024, 12:34pm UTC](https://forum.readymag.com/t/animation-header/3520 "2024-09-11T12:34:40Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Fedor\_Velyaminov](https://forum.readymag.com/u/Fedor_Velyaminov)
#### Post date: [September 11, 2024, 12:34pm UTC](https://forum.readymag.com/t/animation-header/3520/1 "2024-09-11T12:34:40Z")
Hello everyone ! Could anyone help with header animation as on this website [https://saffron-consultants.com/](https://saffron-consultants.com/)
Basically it’s a simple animation of header, which is reacting on scroll. In other words, simply sliding up when scrolling down and appearing when scrolling up. I am not so good in coding, so after trying a long time with Chat gpt i still could not achieve the desired result 😕
Thanks in advance !!
---
### Author:  [@neueMeta](https://forum.readymag.com/u/neueMeta)
#### Post date: [September 16, 2024, 10:44am UTC](https://forum.readymag.com/t/animation-header/3520/2 "2024-09-16T10:44:07Z")
hey… this would require using custom code…
Not that difficult, but needs a bit of basic understanding.
in summary:
use JS to store all elements of your header in a variable.
Add a function like: on scroll down → animate the “top:” css value of all elements of the variable to -200px. On scroll up → revert the animation.
---
### Author:  [@Fedor\_Velyaminov](https://forum.readymag.com/u/Fedor_Velyaminov)
#### Post date: [September 16, 2024, 12:22pm UTC](https://forum.readymag.com/t/animation-header/3520/3 "2024-09-16T12:22:03Z")
Thank you ! I will try that !
Cheers,
Fedor