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:

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.
  1. that is very cool marry 😀 but how to set time that it changes automatically 🙂

    • Tested with index2.html (possibly works with the others).

      In js/main.js find the line:
      isAnimating = false;

      After that line add this:
      window.setInterval(function(){navigate( ‘next’ )}, 1000);

      The number is milliseconds.

      This only starts to work after you choose a transition. Your challenge is to find a way to trigger the effect without intervention.

      I hope this helps

    • Tested with index2.html (possibly works with the others).

      In js/main.js find the line:
      isAnimating = false;

      After that line add this:
      window.setInterval(function(){navigate( ‘next’ )}, 1000);

      Thanks

  2. Really nice effect, maybe i will use it for a little wine shop.

    Always brilliant ideas here 🙂

    • I bet she gets a few hundred of these a day. If only I smelled of peppercorns. lol

  3. I really like it, nice effects, i find it really inspiring (especially with transparent and full width), thanks

  4. Truly great examples of how small details like this add to a pleasurable experience; my coworker didn’t understand why I was laughing at slide transition examples. Some people just don’t get it…

  5. Again a very inspiring article. Finding names for transitions was probably a great exercise as well!

  6. I think something happened with the JavaScript involving the animation prefixes and how they’re handled because the demo doesn’t work on Chrome (version 33.0.1750.154 on Windows). The string seems to be right for it to work in theory though (webkitAnimationEnd)…

  7. how can i program it so one animation is automatically selected without all the options? if anyone could please help mew this this i would appreciate it. 🙂

    thank you
    great demo!

    • Have you found a solution to this… I’m trying to do the same thing but can’t figure it out

    • Firstly comment out the select.

      Then in main.js, in the function changeEffect() find this line:

      classie.addClass( component, effectSel.options[ effectSel.selectedIndex ].value );

      Replace with this example:

      classie.addClass( component, “fxPushReveal” );

      Where I have chosen fxPushReveal

      Done.

      See my reply to another user above on how to have the slideshow automatically….

    • 3 Steps:
      Firstly comment out the fx selector in the index (IE index2.html).

      Then in main.js, replace the changeEffect() function with this:

      function changeEffect() {
      component.className = component.className.replace(/\bfx.*?\b/g, ”);
      classie.addClass( component, “fxPushReveal” );
      }
      I have chosen the effect fxPushReveal

      Finally in the navigate(dir) function comment out this line:

      if( isAnimating || !effectSel.selectedIndex ) return false;

      Boom!

      See my reply to another user above on how to have the slideshow automatically….

    • Did Miike’s solution work for you?

      I’ve been trying to implement it but when I click on the arrows the effect doesn’t work… Is it just me?

    • Hi guys, here’s what you could do for making it work quickly:

      1) index.html

      add the effect class to the component div. For instance if you want the fxCorner then:

      <div id="component" class="component component-small fxCorner">

      2) main.js

      In function init, comment (or remove) the first two lines:

      hideNav();
      changeEffect();

      3) main.js

      In the function navigate change the first line:

      if( isAnimating || !effectSel.selectedIndex ) return false;

      to

      if( isAnimating ) return false;

      Hope it helps! Cheers, ML