Animation is not going gradually

bootstrap

#1

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


#2

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.


closed #3

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