infinite scroll + isotope - scroll

Question

I need help: I use isotope with infinite scroll to display thumbnails for a gallery. Everything works when all items are displayed (without isotope filter). By cons, when one uses the isotope filter (that is to say at the opening of my page), animation to view thumbnails runs for all new elements even those that should be filtered !
In short: we see animation bits for each new item loaded, it expands and then shrinks, becoming opaque and hides, creating sparkles ...
How to disable and hide the animation from the beginning each new element that should be filtered?
Thanks for your help ! (sorry for my English)
/*Masonry*/
var $containermasonry = $('.masonry');
$containermasonry.imagesLoaded( function() {
$containermasonry.masonry({
itemSelector: '.item',
});
$containermasonry.isotope({
transitionDuration: '0.8s',
animationEngine: 'best-available',
itemSelector : '.item',
layoutMode : 'masonry',
filter : '.new',
getSortData: {
date: '[data-date]',
categories:'[data-categ]',
}
});
});
/*infinitescroll*/
$containermasonry.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.item',
loading: {
finishedMsg: '',
img: '_include/img/supersized/progress.gif'
}
},
function( newElements ) {
var $newElems = $( newElements ).css({'display': 'none', 'visibility': 'hide', opacity: 0});
$newElems.imagesLoaded(function(){
/*$newElems.animate({ opacity: 1 });*/
$containermasonry.infinitescroll('retrieve');
$containermasonry.masonry( 'appended', $newElems, true );
$containermasonry.isotope( 'appended', $newElems, true );
});
}
);
// filter items
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
var filterValue = $(this).attr('data-option-value');
$containermasonry.isotope({ filter: filterValue });
});

Answer 1

It is difficult to answer well without a jsfiddle or link.
The big issue is that you are using calling masonry.js and isotope.js at the same time! They are two separate plugins, not designed to be used together. Isotope has a masonry layout which is where your confusion lies, it is not called with masonry.js. Choose one or the other.
Also, if your using isotope v2, animationEngine has been removed from that version.
Here is the code you should use for isotope use:
var $containermasonry = $('.masonry');
$containermasonry.imagesLoaded( function() {
$containermasonry.isotope({
transitionDuration: '0.8s',
itemSelector : '.item',
layoutMode : 'masonry',
filter : '.new',
getSortData: {
date: '[data-date]',
categories:'[data-categ]',
}
});
});
//infinitescroll
$containermasonry.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.item',
loading: {
finishedMsg: '',
img: '_include/img/supersized/progress.gif'
}
},
function( newElements ) {
var $newElems = $( newElements ).css({'display': 'none', 'visibility': 'hide', opacity: 0});
$newElems.imagesLoaded(function(){
//$newElems.animate({ opacity: 1 });
$containermasonry.infinitescroll('retrieve');
$containermasonry.isotope( 'appended', $newElems, true );
});
}
);
// filter items
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
var filterValue = $(this).attr('data-option-value');
$containermasonry.isotope({ filter: filterValue });
});