When I am setting up this filter and using it, the functionality works except for one thing. There is a weird animation during the filter process.

In my codepen the code works great. Copied and pasted with the same JS version and the same build version.

In my website it does not work. Now I’ve gone through and disabled all plugins and every script that is being called besides my code, which was placed in an isolated .js file, and the CSS files.

I am not sure what exactly the issue is anymore and can’t figure out how to isolate the issue further to identify the problem.

I am running the website on WordPress, version 4.7.5

Below is my javascript. It’s the only thing I am calling.

(function($){
  'use strict';

    var grid = jQuery('.masonry').isotope(),
        $win = jQuery(window);

    jQuery('.filter span a').click(function(){
    jQuery( this ).parents( 'div.filter' ).find( 'span a' ).removeClass( 'active' );
    jQuery( this ).addClass( 'active' );

    grid.isotope({
      filter: jQuery(this).attr('data-filter'),
      layoutMode: 'fitRows',
    })
  });
});

Read more here: Weird Isotope.js Animation when filtering


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: