I have a small shifts.
Now everything works almost like i need.
The only thing - the delay between the disappearance of the first three and the emergence of the next three.
Ie a few seconds can not see anything, and only then take off the next 3.
i'l tried to optimize.
My JS now is:
var item_wrapper = $(".slid-container"),
items = $(".slid-container li"),
items_to_append = 3,
append_counter;
TweenMax.staggerFrom($('.slid-container li').slice( 0, 3 ), 2,
{scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true},
0.2);
$("#slider-next").click(function(){
TweenMax.staggerTo(
$('.slid-container li').slice( 0, 3 ), 2,
{scale:0.6, opacity:0, y:-300,delay:0.2, ease:Elastic.easeOut, force3D:true},
0.2,changePos);
return false;
});
// Перебор для переноса в конец
function changePos() {
console.log("changePos");
append_counter = 0;
$(".slid-container li").each(function(indx, element){
if(indx < items_to_append) {
$(item_wrapper).append($(element));
}
});
TweenMax.staggerFromTo($('.slid-container li').slice( 0, 3 ), 2,
{scale:0.6, opacity:0, y:-300,delay:0.5, ease:Elastic.easeOut, force3D:true},
{scale:1, opacity:1, y:0,delay:0.5, ease:Elastic.easeOut, force3D:true},
0.2);
}