// 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();
  }

  var updateItem = function (item, data, i) {
    if (old.indexOf(item) === -1) {

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

      // animate the item to the right position
      var li = contentList.find('li[data-url="' + item + '"]');
      var num = li.find('span');
      li.animate({
        top: lih * i
      }, 200);
      $({ a: +num.text() }).animate({ a: data.visitors }, {
        duration: 300,
        step: function () {
          num.text(~~this.a);
        },
        complete: function () {
          num.text(data.visitors);
        }
      });
    }
  };

  for (var i = 0; i < list.length; i++) {
    updateItem(list[i], data[i], i);
  }
};

var updateGoSquared = function () {
  $.getJSON('https://api.gosquared.com/now/v3/pages?api_key=demo&site_token=GSN-106863-S&limit=20', 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: 240px;
  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: 209px;
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
}

#top-content-list li {
  padding: 8px;
  /* max-width: 90%; */
  max-width: 195px;
  border-bottom: 1px solid #eee;
}

#top-content-list a {
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: 160px;
}

#top-content-list span {
  float: right;
  color: #aaa;
}

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

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