
I recently wrote about transitions and their importance within interface design. The article talked about the ways that transitions are used within many areas of design including product design, automotive and application design.
I discussed a little about how the use of transitions within the browser in desktop environments was a little thin on the ground and this can be attributed to a number of reasons. The processing power and screen resolutions in desktop environments can vary quite considerably as can the users preferred operating system and browser. For these reasons, implementing any type of JavaScript or CSS type animation to be used as a transition can be a challenge and can produce varying results.
Good examples of desktop, browser transitions can be still be found and I can see that as our experience of well designed interfaces in mobile apps increases, as will our demand for slicker interfaces inside desktop browsers.
Examples of transitions inside the browser, on the desktop
I’ve no idea how, and on what type of device you are reading this post but it’s my intention that you view the examples below on your desktop PC. The main point I wanted to make in my previous article was:
When designing an application, an interface or any type of structured content, we must ensure that users understand where they have come from as they arrive at the new page or state.
Although the examples below are not perfect in my opinion, they do a good shop of demonstrating the principals mentioned above.
Cultural Solutions UK
YEBO Creative
Campaign Monitor is Hiring
Head2Heart

I would really like to know if you have come across any other good examples of transitions (especially in the browser, on the desktop) so please do let me know by commenting below. In the meantime, here is some further reading:
- jQuery.ScrollTo by Ariel Flesler
- Mission Transition – Smashing Magazine
- Meaningful Transitions – Motion Graphics in the User Interface
- Animations in User Interface Design: Essential Nutrient Instead of Eye Candy
- CSS Easing Animation Tool
- How to Use jQuery to Make Slick Page Transitions


