Animation is not going gradually

I have a animated (bootstrap) header with a logo in it. What I need is that when scrolling start the header is getting a lesser height and the logo should become smaller. This is what I have in my CSS:

header 
{
    background: #222;
    transition: all 3s cubic-bezier(0.55, 0, 0.1, 1);
}

.navbar-brand 
{
  	padding: 10px 0;
}

.navbar-brand>img 
{
	margin: 0 auto;
    display: block;
    float: left;
    transition: all 3s cubic-bezier(0.55, 0, 0.1, 1);
}

header.sticky 
{
	height: 48px;
	line-height: 48px;
	position: fixed; 
	padding-left: 20px;
}

header.sticky .navbar-brand 
{
    height: auto;
    margin: 0;
    padding: 0;
}

header.sticky .navbar-brand>img 
{
	width: 160px; // 45% from the original logo
  	padding-top: 9px;
}

And the JS function I use:

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){  
        $('header').addClass("sticky");
    }
    else{
        $('header').removeClass("sticky");
    }
});

It is working but instead that the the logo is scaling down gradually it is just going from the original size to the header.sticky size. What other approach should I take to make the animation go gradually? Thank you in advance

You can’t animate to an auto setting with css transitions. That manes you can’t go for height auto to height 48px.

You would need to go from height: 100px to height 48px or similar.

Of course fixing the height of the header could be awkward in a fluid layout so you need to be careful. Or failing that do the animation in js.

There is a hack and you could use max-height for the header as shown in this codepen:

You set the normal header to have a max-height greater than you will ever need and then it will transition to max-height:100px ion the sticky rule. It’s not perfect but the best you can do unless you script it or fix the heights as already mentioned.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.