Twitter Floating to Fixed Transition

✋ What is it?

This is a layout solution found on Twitter for Web. Every Twitter profile showcases the profile picture as a floating element that sits between the cover photo and the body of the profile. When scrolling this page, Twitter will trigger a unique transition that pushes up the profile picture element and brings down a summarized version of the profile data.

🤲 How does this interaction or solution work?

Twitter profiles have three main vertical levels. 1) the cover photo 2) the profile picture and 3) the main body.

Twitter has a particular UI implementation where the profile picture floats in the intersection of the other elements.

While this treatment brings excellent aesthetics and use of real estate, it creates a challenge for the bottom element (the main body), since this one requires to keep a row with profile information fixed to provide visibility to the users as they scroll to a timeline of tweets.

Twitter solves this problem by mixing two sequential animation effects that create a smooth transition that removes the floating element and allows the first row of the main body to stay fixed.

When as a user your start scrolling this page, you will notice that once you have scrolled beyond a certain point of the profile picture, this element will slide up. Thereupon you will see the now empty space which was initially covered by half of the original profile picture, is a placeholder space for a summary element that slides up from the bottom of the row itself.

The final effect is a seamless transition that allows the layout to use a floating element without sacrificing the flexibility of fixed elements that live below the floating intersection.

🙌 How does this interaction or solution work?

Layout and Keeping Context

Many designers and product professionals treat animations as unnecessary bloat. However, there are instances in which a set of animations can improve flow and hierarchy, and also enable interactions that are blocked by the static nature of graphical user interfaces.

In this case, Twitter achieves a pleasant transition that allows its user interface to reflow elements that change in the hierarchy as a user scrolls, but that are still necessary to keep in context once the page has been scrolled.