// we'll store the previous list in this variable
var oldList;

var contentList = $('#top-content-list').css('position','relative').empty();

var calculateListHeight = function() {
  if (contentList.find('li').length) {
    return contentList.find('li').outerHeight();
  } else {
    // append a sample list item to calculate the height of each item
    var height = contentList.html('<li><a>-</a></li>').find('li').outerHeight();
    contentList.empty();
    return height;
  }
};

var animateGoSquared = function(list, old, data) {
  var lih = calculateListHeight();

  // remove items no longer in the list
  for (var i = 0; i < old.length; i++) {
    if (list.indexOf(old[i]) === -1) contentList.find('li[data-url="' + old[i] + '"]').remove();
  }

  for (var i = 0; i < list.length; i++) {
    if (old.indexOf(list[i]) === -1) {

      // new page, not seen before
      contentList.append('<li style="position: absolute" data-url="' + list[i] + '"><a href="' + list[i] + '" title="' + data[i].title + '">' + data[i].title + '</a></li>');
      contentList.find('li[data-url="'+list[i]+'"]').css({
        top: lih*i
      });
    } else {

      // animate the item to the right position
      contentList.find('li[data-url="'+list[i]+'"]').animate({
        top: lih*i
      },200);
    }
  }
};

var updateGoSquared = function() {
  $.getJSON('https://api.gosquared.com/now/v3/pages?api_key=demo&site_token=GSN-106863-S&limit=10', function(data) {
    setTimeout(updateGoSquared, 5000);

    var pageArray = [];
    for (var i = 0; i < data.list.length; i++) {
      pageArray.push(data.list[i].path);
    }
    animateGoSquared(pageArray, oldList || [], data.list);
    oldList = pageArray;
  });
};

updateGoSquared();

<div id="top-content">
  <h2>Top Content</h2>
  <ul id="top-content-list"></ul>
  <p class="powered">Powered by <a href="https://gosquared.com">GoSquared</a></p>
</div>

#top-content {
  background: white;
  max-width: 220px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 180px;
  box-shadow: 1px 1px 2px #ddd;
}

#top-content h2 {
  text-transform: uppercase;
  font-size: 12px;
  margin:0;
  padding: 8px;
  color: #555;
}

#top-content-list {
  padding: 0;
  height: 149px;
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
}

#top-content-list li {
  padding: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

#top-content-list a {
  color: #666;
  text-decoration: none;
}

#top-content .powered {
  font-size: 10px;
  width: 220px;
  text-align: right;
  margin-top: 5px;
}

#top-content .powered a {
  color: #222;
}