I want my header to change from a large logo to a small logo with an animation or transition.

Hi luis,

Do you have a video showing this effect?

I know since the Twitter page redesign in 2014, that your "profile photo" scales down to 200×200 on your profile page, gets even smaller in timelines, and blows up to full size when somebody clicks on it.

On mobile devices it also seems to center itself over the new size header photos (where sometimes you can specify a black/white framing box, but not always on Android devices).

Just off the top of my head, though... Sounds like some kind of javascript effect..but CSS also supports these kind of effects. I believe you can even mix-n-match both (for cross browser compatibility reasons): http://playground.benbarnett.net/jquery-animate-enhanced/

There is also a new javascript library I've been using to replace the old jquery animate() --it's call velocity.js:

https://github.com/julianshapiro/velocity

It can be a workaround for some of the layout thrashing that jquery causes/caused.

What kind of transition/animation? If it's just a matter of gradually making it smaller as you scroll, a simple transition: all 0.4s ease; would do the trick (there's a whole guide here too: http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/)

ok that is great but what I was thinking was more like the transition that appears in the twitter profile page. Were the the big avatar image moves out of the screen and the smaller avatar image take its place.

I don't have a video but what I was referring to was the effect in the avatar of the twitter profile in the desktop. I think the last link that you wrote will help me figure out How can I do this effect. Thank you.