javascript - Limit Elements on Screen while animating -

i have script slides elements randomly right left. i'm running issue how limit number of elements on screen. elements in array appended dom. how split array have 6 elements slide , other appended later on.

to illustrate this, i've made jsfiddle

https://jsfiddle.net/magic77/fwfv0kon/6/

js code

var gettemplate = function (id) {             return '<a href="#" target="_blank" class="feed-post" id="feed_' + id + '" style="transform: translate3d(-500px, 0, 0) scale(1);">' +                 '<div class="feed-post-wrap">' +                 '<div class="feed-post-image" style="background-image: url(\'assets/images/8/artists-testbild-7aed80e8.jpg\');"></div>' +                 '</div>' +                 '</a>';         };          var $stagetview = $('.socialfeeds'),             elements = [];          (var = 0; < 10; i++) {             // append elements dom             $stagetview.append(gettemplate(i));              // push elements array             elements[i] = $('#feed_' + + '');         }          var animationinterval = setinterval(function () {             if (elements.length > 0) {                 var firstelement = elements.shift();                 firstelement.testplug2({                     y: fnc.randint(0, 150),                     speed: fnc.randint(30, 120),                     scale: fnc.randfloat(0.4, 1.01)                 });             } else {                 clearinterval(animationinterval);             }         }, 1500);      };       $.fn.testplug2 = function (options) {          // default settings         var settings = $.extend({             element: this,             x: 0,             y: 0,             height: 350,             width: 350,             startx: 1400,             scale: 1.0,             speed: 100         }, options);          var obj = obj || {},             _this = this,             // static width needed proper calculation             // in case 350px div width + margin: 20px;             staticwidth = 390;          var addlisteners = function () {             // delayed stage recalculation on resize             var delaycalc = fnc.debounce(function () {                 calculateobjstart();             }, 150);             $(window).on('resize', delaycalc);              // pause/resume on hover             settings.element.hover(                 function () {                     _this.pause();                 }, function () {                     _this.play();                 }             );         };          var init = function () {             // update start x based on screen size             calculateobjstart();             settings.x = settings.startx;             settings.y = fnc.randint(1, (500 - (staticwidth * settings.scale + 10)));             //settings.y = math.floor(math.random() * (170 - 1 + 1)) + 1;             settings.width = staticwidth * settings.scale;         };          var moveobject = function () {             // move object's x position             var velocity = settings.speed * obj._delta;             settings.x = settings.x - velocity;              // reset when off screen             if (settings.x < -settings.width - 20) {                 settings.x = settings.startx;                 settings.scale = fnc.randfloat(0.3, 1.05);                 settings.speed = fnc.randint(30, 150);                 settings.y = fnc.randint(1, (500 - (staticwidth * settings.scale + 10)));                 //settings.y = math.floor(math.random() * (170 - 1 + 1)) + 1;                 settings.width = staticwidth * settings.scale;             }         };          var calculateobjstart = function () {             settings.startx = document.body.clientwidth;         };          var frame = function () {             obj.now = date.now();             obj._delta = (obj.now - obj._then) / 1000; // converts seconds             obj._then = obj.now;              // update object position             moveobject();              // move element             settings.element.css('transform', 'translate3d(' + settings.x + 'px, ' + settings.y + 'px, 0) scale(' + settings.scale + ')');             obj.rafid = requestanimationframe(frame);         };          // public function         this.play = function () {             if (!obj.isrunning) {                 obj._then = date.now();                 frame();                 obj.isrunning = true;             }             return this;         };          // public function         this.pause = function () {             cancelanimationframe(obj.rafid);             obj.isrunning = false;             return this;         };          init();         addlisteners();         this.play();     };       var fnc = {         debounce: function (func, wait, immediate) {             var timeout;             return function () {                 var context = this,                     args = arguments;                 var later = function () {                     timeout = null;                     if (!immediate) {                         func.apply(context, args);                     }                 };                 var callnow = immediate && !timeout;                 cleartimeout(timeout);                 timeout = settimeout(later, wait);                 if (callnow) {                     func.apply(context, args);                 }             };         },         randint: function (min, max) {             return math.floor(math.random() * (max - min + 1)) + min;         },         randfloat: function (min, max) {             return (math.random() * (max - min) + min).tofixed(4);         }     } 

you use array.splice split array. hope find helpful.

var = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];  while (a.length) {  console.log(a.splice(0, 6)); } // [ 1, 2, 3, 4, 5, 6 ] // [ 7, 8, 9, 10, 11, 12 ]