Weird Isotope.js Animation when filtering

Question

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',
    })
  });
});

Answer 1

Remove the <link rel='stylesheet' id='isotope-style-css' ...> CSS.

Unless you specify that you are only using CSS ( see animationEngine in the Metafizzy docs ) then it's going to load both the jQuery animation and the CSS -- causing the weirdness. You can test out this fact by checking out your CodePen duplicated here with the weirdness because I added the CSS: http://codepen.io/carasmo/pen/KmrPRb

Answer 2

You have an error in console: «Uncaught TypeError: Cannot read property 'firstChild' of null» .

This is because you try to initiate a Google Map on an inexistant element #map-canvas .

To fix that... What I would do is to remove lines #881 to #1183, which is your Google Map API initialisation script, from the script.js .

I would place this in a map.js which I would call only on the page(s) where there actually is an element with id map-canvas .

For now, this error just halts the loading of script.js.
So the document.ready() function isn't closed properly.

You used (function($){ which is the same as document.ready() on line #209.