Inspiration for Item Transitions

Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.
ItemTransitions

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use cases: a small image slideshow, a large header slideshow and a slideshow using product images with a transparent background. These transitions don’t have to be restricted to a slideshow, of course. But to see them in action, this was the best option for a demo. You can surely imagine transitioning from one state to another in many different circumstance (think about scrolling a page, loading items, clicking a button, sending a form, and many many more).

A very special case is the usage of (product) images with transparent background. Depending on the item itself, there are many possibilities for transitions that imitate the real-world movement or behavior. A great example in the wild can be found on the brilliant hat presentation section of Optimo Chicago. The slideshow conveys a feeling of throwing a hat into the viewport, transmitting the feeling of lightness and augmenting the viewing experience. This is such an excellent example of how adding the right animations can enhance product browsing and bring it to another level. In our last demo, we give you some simple inspiration using a wine bottle to explore the feeling for heavier objects.

For transitioning the state, we are using CSS Animations. This allows us to specify a certain behavior for the items when coming from any direction. This can be useful for direction-aware navigation of items, like you can see in the demos.

One of the transitions that can be viewed in the large header slideshow example is based on Hakim El Hattab’s slick context-shift transition, Kontext, and another one makes use of one of Lionel’s CSS Shake animations.

Please note that in some examples we are using CSS Animations on pseudo-elements which might not be supported in some browsers (especially mobile browsers).

Please also note that the examples only serve for your inspiration. We haven’t implemented any fallbacks.

We’ve divided the inspiration for transitions into three demos:

ItemTransitions01

Small Component: these effects are especially interesting for smaller sized images.

ItemTransitions02

Full Width: Having a large header image or background let’s us explore a different set of effects but also restricts the movements and speeds a bit.

ItemTransitions03

Transparent Background: Here we can play with physics and effects that resemble the movements of objects in the real world. Using the right animations can help transmit the feeling for the weight and material of an item.

The images in the first demo are from the Hand Lettering project by Ben Johnston. The ones in the second demo are from Unsplash and the wine bottle mockups can be found over at Pixeden.

We hope you enjoy these effects and find them inspiring.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 88

Comments are closed.
    • i want add autoplay in this slider and i want to run all effect together

      thank tou

  1. You guys do such amazing amount of work. This is damn cool!! Thanks for all the efforts!

  2. What kind of mystic browser do I need to see the animations?
    On Chrome Version 33.0.1750.154 nothing happens 🙁

  3. You guys are really awesome. This site is very inspirating, I’m visiting it daily, checking for news.
    Thank you. Just had to say that 🙂

  4. This are really nice…is the code open soucre or are you granting permission to use these in our projects…If not that is ok…they were nice to look at…

    Michael!

  5. Hola Codrops, me encantan los sliders, encontrar ejemplos asi, nos permiten a los diseñadores tener mas herramientas para hacer buenas webs.
    Saludos desde Buenos Aires, Argentina

  6. I’m iniciane in js, I would put a soft transition scale as standard and add auto play how I do it? help me please thanks

  7. Muy interesante! como puedo hacer para que en vez del “prev” y el “next” sea un menú?. gracias 🙂

    • the codrops interactive demo menu plugins not supporting any other brower except mozillza………….give me a solution my website is spoiling

  8. Hello! Nice implementation! Is it possible to improve with autoplay feature?

    thanks!

  9. Hi,

    On the second demo, can you explain how you created the filter on the image? I mean, this “Instagram” like effect.