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

View demo Download source

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.

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 80

  1. 1

    The “cliff diving” one reminded me a lot of those old viewfinder toys. I put a thick white border around the surrounding article element, and it looked awesome! Rather nostalgic. Thanks for these, Mary Lou! Excellent work as usual.

  2. 2

    Hi, I try use the 3 steps of Miike and didn’t work….
    SOMEONE CAN HELP ME?
    The problem line is

    ” effectSel.addEventListener( ‘change’, changeEffect ); ”

    Mikiie Steps :
    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….

  3. 3

    Hi guys this is how i have main.js, i didn’t wanted it to auto scroll, but mine doesn’t need to select an effect:

    find this line and change it
    classie.addClass( component, ‘fxSoftScale’ );

    here it goes

    (function() {
    var support = { animations : Modernizr.cssanimations },
    animEndEventNames = {
    ‘WebkitAnimation’ : ‘webkitAnimationEnd’,
    ‘OAnimation’ : ‘oAnimationEnd’,
    ‘msAnimation’ : ‘MSAnimationEnd’,
    ‘animation’ : ‘animationend’
    },
    // animation end event name
    animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],

    /*effectSel = document.getElementById( ‘fxselect’ ),*/
    component = document.getElementById( ‘component’ ),
    items = component.querySelector( ‘ul.itemwrap’ ).children,
    current = 0,
    itemsCount = items.length,
    nav = component.querySelector( ‘nav’ ),
    navNext = nav.querySelector( ‘.next’ ),
    navPrev = nav.querySelector( ‘.prev’ ),
    isAnimating = false;

    function init() {
    showNav();
    changeEffect();
    navNext.addEventListener( ‘click’, function( ev ) { ev.preventDefault(); navigate( ‘next’ ); } );
    navPrev.addEventListener( ‘click’, function( ev ) { ev.preventDefault(); navigate( ‘prev’ ); } );
    /*effectSel.addEventListener( ‘change’, changeEffect );*/
    }

    function hideNav() {
    nav.style.display = ‘none';
    }

    function showNav() {
    nav.style.display = ‘block';
    }

    function changeEffect() {
    component.className = component.className.replace(/\bfx.*?\b/g, ”);
    /*if( effectSel.selectedIndex ) {
    classie.addClass( component, effectSel.options[ effectSel.selectedIndex ].value );
    classie.addClass( component, ‘fxPushReveal’ );
    showNav();
    }*/
    classie.addClass( component, ‘fxSoftScale’ );
    /*else {
    hideNav();
    }*/
    }

    function navigate( dir ) {
    /*if( isAnimating || !effectSel.selectedIndex ) return false;*/
    isAnimating = true;
    var cntAnims = 0;

    var currentItem = items[ current ];

    if( dir === ‘next’ ) {
    current = current 0 ? current – 1 : itemsCount – 1;
    }

    var nextItem = items[ current ];

    var onEndAnimationCurrentItem = function() {
    this.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
    classie.removeClass( this, ‘current’ );
    classie.removeClass( this, dir === ‘next’ ? ‘navOutNext’ : ‘navOutPrev’ );
    ++cntAnims;
    if( cntAnims === 2 ) {
    isAnimating = false;
    }
    }

    var onEndAnimationNextItem = function() {
    this.removeEventListener( animEndEventName, onEndAnimationNextItem );
    classie.addClass( this, ‘current’ );
    classie.removeClass( this, dir === ‘next’ ? ‘navInNext’ : ‘navInPrev’ );
    ++cntAnims;
    if( cntAnims === 2 ) {
    isAnimating = false;
    }
    }

    if( support.animations ) {
    currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
    nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
    }
    else {
    onEndAnimationCurrentItem();
    onEndAnimationNextItem();
    }

    classie.addClass( currentItem, dir === ‘next’ ? ‘navOutNext’ : ‘navOutPrev’ );
    classie.addClass( nextItem, dir === ‘next’ ? ‘navInNext’ : ‘navInPrev’ );
    }

    init();
    })();

  4. 4

    Hi,

    Can anyone help me understand how i can achieve one effect without selection the effect from the dropdown menu.

    I tried the above method but it work for me.

    Thanks,

    • 5

      Hi Seham, 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

    • 7

      Hi! Have you figured out how to autoplay? Mary Lou can you please help us?!

    • 9

      I’ve tried this way, but the “next” button don’t work, the “prev” works fine
      In Developer Tools , I find that when click “next” button, the next item doesn’t have a current class, and “navInNext” class never removed

  5. 10

    First congratulations to quality.
    I have little knowledge in programming, how I can stop when you reach the last photo? or alert saying last photo and just let go backwards.

  6. 11

    Hello, I am wanting to make this an automatic slider for the full width one. How would I do this? Thanks

  7. 12

    Great work!
    thank you for sharing.

    I have one total noob JS question:

    I try to add multiple sections with images in order to have this effect (imagine several sliders). But it only works on the first one.
    Any idea how to approach it?

  8. 13

    Hello… i was truing to find the autoplay but i can;t…

    I used the Varquez solution, that work fine…

    So If anyone can help for autoplay the slide i would be gratiful!

  9. 16

    Mary Loy hi,
    Congratulations for all your articles, they are amazing!

    I have a problem with using the slider in a WordPress site as my loop generates the li elements and if I have the class=”current” then all the li elements have it and you need to click 2-3 times on the next/prev arrows to move on. If I remove the class=”current” then the first slide does not appear and I have to click on the next button to get it started. Is there a way to solve this? I tried appending with javascript a class current to my first-child li but it does not work. Am I missing something very simple?!

    Thanks in advance for your time!

    • 17

      Hi, don’t bother to answer, it was very simple to fix, just needed to alter the loop to print the class current only to the first item…! I knew I was missing something very simple!

  10. 18

    Hi Mary
    I love your work, congratulations.
    I want to ask a question:
    With this code I can animate a picture with a very long length and it stops at a point that I choose. The result I want to achieve is a kind of book where characters are mixed with 3 sliders.
    thank you very much

  11. 19

    Hi, we made it autoplay by adding the following lines in the main.js inside function init() {
    (after the line navPrev.addEventListener( 'click', function( ev ) { ev.preventDefault(); navigate( 'prev' ); } );


    setInterval(function(){
    navigate('next');
    },5000);

    Hope this helps someone else too! (5000 is the time interval)

  12. 20

    Hi Mary,
    Nice work!!

    A cuestion: in method navigate is better this:

    current = (current + 1) % itemsCount

    or

    current = current < itemsCount - 1 ? current + 1 : 0;

  13. 21

    It is possible to add swipe option in mobile in order to move slides with fingers? if yes, how please?

    • 22

      I will add this fonctionnality for a website: you can use https://github.com/mattbryson/TouchSwipe-Jquery-Plugin (or something else, whatever) and add swipe event next:

      function init() {
      navNext.addEventListener("click", function (ev) { ev.preventDefault(); navigate("next"); });
      navPrev.addEventListener("click", function (ev) { ev.preventDefault(); navigate("prev"); });

    • 24

      Hi,

      You can add apply() here:


      if (support.animations) {
      currentItem.addEventListener(animEndEventName, onEndAnimationCurrentItem);
      nextItem.addEventListener(animEndEventName, onEndAnimationNextItem);
      }
      else {
      onEndAnimationCurrentItem.apply(currentItem);
      onEndAnimationNextItem.apply(nextItem);
      }

      Animations will not work, but at least, you will have a fonctionnal slider.

      Hope it will help

  14. 25

    Hi marry

    It’s so amazing slider but I wonder how to use full-width slider to be full width of centered position container and how to automatically change images without pressing on left or right.

  15. 27

    Hi,

    Very nice work, congrats. It needs a little fix for IE9 (and for all non-support animation browser):


    if (support.animations) {
    currentItem.addEventListener(animEndEventName, onEndAnimationCurrentItem);
    nextItem.addEventListener(animEndEventName, onEndAnimationNextItem);
    }
    else {
    onEndAnimationCurrentItem<strong>.apply(currentItem)</strong>;
    onEndAnimationNextItem<strong>.apply(nextItem)</strong>;
    }

    Animations will not work, but at least, you will have a fonctionnal slider.

    Hope it will help.

    Once again, such an amazing work, keep going!

  16. 29

    This is a nifty component! I’m not a very good coder… I’d like to use this component multiple times on a page & can only get the 1st instance to work. I’ve tried renaming/adding selectors, ids, etc. I just can’t get it to work. Any tips would be great!

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>