Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

isotope removing/replacing animations/transitions

Hello, I'm using isotope to filter products in my online shop.

I would like to have the animations changed. Here is what I want:

When changing the filter:

1) All items should instantly disappear, with no animation/transition.

2) Items should appear in their new places, without sliding. They should all fade in.

Keep in mind that even the items that were there before should also disappear and reappear with the new items. Nothing should fade out, shrink, or slide - the only animation/transition should be all items fading in when they appear.

User Gravatar

Dreamsickle

Posted Apr 24 2014 18:43 UTC

$30


  • Assigned To NBoychev
  • Solved
  • jquery
    isotope
  • 5935 Views

7 Replies


Initialize your isotope with

$('#products').isotope({transitionDuration: 0});

Instead of

$('#products').isotope()
User Gravatar

elado

Posted Apr 24 2014 18:50 UTC

That works for part of it, but all items need to disappear and fade in each time you click a filter option.

User Gravatar

Dreamsickle

Posted Apr 24 2014 18:56 UTC

Some info would be nice.. Isotope V1 / V2? a url? use css3? wordpress?

User Gravatar

guyisra

Posted Apr 24 2014 21:34 UTC

Hi Dreamsickle,

I assume that you are working on the previous project that was posted from you, so here is the code:

(function($) {
    $('#products').isotope({transitionDuration: 0})
        // initialize Isotope after all images have loaded
    var $container = $('#products').imagesLoaded( function() {

        $container.isotope({
        // options
            itemSelector: '.item',
            layoutMode: 'fitRows',
            filter: '.product-cat-mens.product-tag-all'
        });
    });


    // store filter for each group
    var filters = {};

    // filter items on click
    $('#product-tags').on( 'click', '.shop-sorter-button', function() {
        var $this = $(this);
        // get group key
        var $buttonGroup = $this.parents('.button-group');
        var filterGroup = $buttonGroup.attr('data-filter-group');
        // set filter for group
        filters[ filterGroup ] = $this.attr('data-filter');
        // combine filters
        var filterValue = '';
        for ( var prop in filters ) {
            filterValue += filters[ prop ];
        }
        // set filter for Isotope
        $container.isotope({ filter: filterValue });


        $container
            .find('.product:not('+ filterValue +')')
            .addClass('hidden');

        $container
            .find('.product' + filterValue)
            .removeClass('hidden');
    });

    $('#product-categories').on('click', '.shop-sorter-button', function() {
        var $this = $(this);

        var $activeTag = $('#product-tags').find('.shop-sorter-button').first().addClass('is-active');

        $activeTag.siblings().removeClass('is-active');

        // get group key
        var $buttonGroup = $this.parents('.button-group');
        var filterGroup = $buttonGroup.attr('data-filter-group');

        var $tagsGroup = $activeTag.parents('.button-group');
        var tagsGroup = $tagsGroup.attr('data-filter-group');

        filters[filterGroup] = $this.attr('data-filter');
        filters[tagsGroup] = $activeTag.attr('data-filter');

        // combine filters
        var filterValue = '';
        for ( var prop in filters ) {
            filterValue += filters[ prop ];
        }

        // set filter for Isotope
        $container.isotope({ filter: filterValue });


        $container
            .find('.product:not('+ filterValue +')')
            .addClass('hidden');

        $container
            .find('.product' + filterValue)
            .removeClass('hidden');
    });
        // change is-active class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );

        $buttonGroup
            .on( 'click', '.shop-sorter-button', function() {
                $buttonGroup.find('.is-active').removeClass('is-active');
                $( this ).addClass('is-active');
            })
            .find('.shop-sorter-button').first().trigger('click');
    });
}) (jQuery);

You will need some CSS too:

.products .product {
    -webkit-transition: 300ms;
       -moz-transition: 300ms;
        -ms-transition: 300ms;
         -o-transition: 300ms;
            transition: 300ms;
}
.products .product.hidden { opacity: 0; }

Regards, Nikola Boychev

User Gravatar

NBoychev

Posted Apr 24 2014 22:37 UTC

Solution

This didn't solve your task? Get your own custom solution.

Nikola,

Thanks for the previous answer and the adjustments to this code. It's working for the most part how we need it to.

User Gravatar

Dreamsickle

Posted May 6 2014 14:00 UTC

what should i do to change the direction of animation to right not left ?

User Gravatar

user12305

Posted Oct 17 2016 14:35 UTC

Hi user12305,

You can use a tricky method here - change the direction to right to left (`direction: rtl;`) of the parent (`.isotope`) via CSS. Then apply the left to right direction to the child elements (`direction: ltr;`). If you prepare a fiddle, I can help you with the changes.


Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Oct 17 2016 15:47 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions