(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Introduction – Change Header size or any CSS property with Elementor & GSAP
In this tutorial, we are learning to a header that changes size when we scroll. You can also add any other CSS property to change based on scroll. There are 2 types of header we will make. First one only turns Full size if you are at top of the page. Second one is based on scroll up or scroll down, example: if scrolling down, it will make the header height smaller but scrolling up will make it bigger.
Version 1 – Header Based on Scroll (Full size at top of the page)
- dm-dynamic-header is the CSS of the header container. In below code, we have given it height of 110px and it goes to 80px when scrolling down.
- dm-dynamic-logo is the CSS class of the logo image. It goes from height 100px to 60px.
- In the scrollTrigger, for start and end we are using, +=500px. So when you scroll 500px below your header, it would run the animation.
- You can simply add more elements to control based on scroll by simply coping the dmDynamicHeader.to timeline code. (Check video for reference)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
.dm-dynamic-header {
transition: none !important;
height: 110px;
}
.dm-dynamic-logo{
height: 100px;
transition: none !important;
}
</style>
<script>
const dmDynamicHeader = gsap.timeline({
scrollTrigger: {
trigger:'.dm-dynamic-header',
start:'+=500px 0%',
end:'+=500px 0%',
toggleActions:'play none reverse none',
markers:false
}
});
dmDynamicHeader.to('.dm-dynamic-header', {
height: '80px',
duration:0.3
},0);
dmDynamicHeader.to('.dm-dynamic-logo', {
height: '60px',
duration:0.3
},0);
</script>
Version 2 – Header Based on Scroll Up or Down (Increase height on scroll down and decrease height on scroll up)
- dm-dynamic-header is the CSS of the header container. In below code, we have given it height of 110px and it goes to 80px when scrolling down.
- dm-dynamic-logo is the CSS class of the logo image. It goes from height 100px to 60px.
- You can simply add more elements to control based on scroll by simply coping the dmDynamicHeader.to timeline code. (Check video for reference)
- We are simply doing timeline.play() on scrolling down and timeline.reverse(); on scrolling up. (Below timeline name is dmDynamicHeader)
- To SHOW/HIDE based on scroll, simply add transform:translateY(0%); in CSS styling of dm-dynamic-header (line 8) and in GSAP code (line 41) add transform:’translateY(-100%)’. (Check reference video above)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
.dm-dynamic-header {
transition: none !important;
height: 110px;
}
.dm-dynamic-logo{
height: 100px;
transition: none !important;
}
/*Reference Code to Hide/Show Header
.dm-dynamic-header {
transform:translateY(0%);
}
in GSAP script code below
transform: 'translateY(-100%)';
*/
</style>
<script>
const dmDynamicHeader = gsap.timeline();
dmDynamicHeader.to('.dm-dynamic-header', {
height: '80px',
duration:0.3
},0);
dmDynamicHeader.to('.dm-dynamic-logo', {
height: '60px',
duration:0.3
},0);
dmDynamicHeader.pause();
let currentScroll3 = 0;
let isScrollingDown3 = true;
window.addEventListener("scroll", function () {
if (window.pageYOffset > currentScroll3) {
isScrollingDown3 = true;
dmDynamicHeader.play();
} else {
isScrollingDown3 = false;
dmDynamicHeader.reverse();
}
currentScroll3 = window.pageYOffset;
});
</script>
