How to animate dynamic number of items according to a array of positions

Question

What I trying to achieve is moving div positions according to an array of positions. Number of objects is unknown could be between 4 to 20.

Only 4 elements shown at once.

To be clear, I've 4 item different positions and each time (like every 4 seconds) items will change position and then leave the scene. (below, numbers are represents items and letters are positions)

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: d c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - d c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - - d c b a

these are the positions;

var positions = [
    { top: 0,   left: 1100, zoom:70 },//(out of scene)
    { top: 0,   left: 420,  zoom:70 },
    { top: 185, left: 217,  zoom:80 },
    { top: 310, left: 0,    zoom:100},
    { top: 646, left: 210,  zoom:80 },
    { top: 800, left: 210,  zoom:80 } //(out of scene)
];

This is where am I so far. I believe I'm stuck. Seems working but it is broken.

var lastItemNo = -1;
var lastAnimation = 0;
var visibleItems = Array();

function tick(){

    visibleItems[visibleItems.length] = (lastItemNo+1);

    if((lastItemNo+1) == items.length){
        lastItemNo = -1;
    }else{
        lastItemNo++;
    }

    if(visibleItems.length>6){
       var removedItem = visibleItems.shift();
       $(".left .holder > .tweet").eq(removedItem).attr("data-pos",0).css({
            top:positions[0].top,
            left:positions[0].left,
            zoom:positions[0].zoom+"%",
        });
    }

    for(var i=0;i .tweet").eq(i).attr("data-pos"));
    }

    $.each(visibleItems,function(i,el){

        var currentItem = $(".left .holder > .tweet").eq(el);
        console.log(el);
        console.log(parseInt(currentItem.attr("data-pos"))+i);

        currentItem.animate({
            top:positions[parseInt(currentItem.attr("data-pos"))].top,
            left:positions[parseInt(currentItem.attr("data-pos"))].left,
            zoom:positions[parseInt(currentItem.attr("data-pos"))].zoom+"%",
        });

        currentItem.attr("data-pos", parseInt(currentItem.attr("data-pos"))+1 )


    });

    clog("tick");

}

html is;



    

        
            
                
                
            
            
                Software AG Tu00fcrkiye @SoftwareAGTR
                TEXT
            
        

        
            
                
                
            
            
                Software AG Tu00fcrkiye @SoftwareAGTR
                TEXT!
            
        

        
            
                
                
            
            
                Ece Vahapoglu @ecevahapoglu
                text https://t.co/JDfP6ATMWk
            
        

        
            
                
                
            
            
                Fatih Mert Esmer @mertesmer
                #DASummit15 http://t.co/mpnBIh8zJK
            
        

        
            
                
                
            
            
                Agah Alptekin @AgahAlptekin
                RT @digitalage: TEXT ://t.…

John S · Accepted Answer

Using the same positions array as defined in the question:

var unusedItems = $('.left > .holder > .tweet').get(),
    usedItems = [];

// Initially hide all the items.
$(unusedItems).css({ top: positions[0].top, left: positions[0].left, zoom: positions[0].zoom + "%" });

function tick() {
    // If the usedItems array is full, remove the lead item and add it back
    // to the unusedItems array (as long as the item isn't null).
    if (usedItems.length == positions.length) {
        var item = usedItems.shift();
        if (item) {
            unusedItems.push(item);
        }
    }

    // Add an unused item to the usedItems array if there is one.
    // Otherwise add null as a placeholder.
    usedItems.push(unusedItems.shift() || null);

    // Loop through the usedItems array and animate the items to their
    // new positions, skipping the null placeholders.
    $.each(usedItems, function(i, item) {
        if (item) {
            var $item = $(item),
                position = positions[usedItems.length - 1 - i];
            $item.animate({ top: position.top, left: position.left, zoom: position.zoom + "%" });
        }
    });
}

There won't be any null placeholders if the number of items is equal to or greater than the number of positions.

The null placeholders and the following line of code are what associate the positions with the items:

position = positions[usedItems.length - 1 - i];

jsfiddle

How to animate dynamic number of items according to a array of positions

Answers (1)

Related Questions