diff --git a/test/demo/item-animation.html b/test/demo/item-animation.html
index a6cbf3a6..254458a6 100644
--- a/test/demo/item-animation.html
+++ b/test/demo/item-animation.html
@@ -14,12 +14,18 @@
                 margin: 0;
             }
 
+            .controls {
+                position: absolute;
+                right: 10px;
+                top: 10px;
+            }
+
         </style>
         <script>
 
             // ----------
             App = {
-                itemCount: 20,
+                itemCount: 5,
                 positionRange: 100,
                 sizeRange: 30,
                 delay: 100,
@@ -29,6 +35,7 @@
                     var self = this;
 
                     this.index = 0;
+                    this.paused = false;
 
                     var tileSource = {
                         Image: {
@@ -56,29 +63,57 @@
                     });
 
                     this.viewer.addHandler('open', function() {
+                        self.updateCount();
+
                         self.viewer.viewport.fitBounds(new OpenSeadragon.Rect(0, 0,
                             self.positionRange + self.sizeRange,
                             self.positionRange + self.sizeRange));
 
                         self.animate();
                     });
+
+                    var $pause = $('.toggle-pause').click(function() {
+                        self.paused = !self.paused;
+                        $pause.text(self.paused ? 'Play' : 'Pause');
+                    });
+
+                    $('.add').click(function() {
+                        for (var i = 0; i < self.itemCount; i++) {
+                            self.viewer.addTiledImage({
+                                tileSource: tileSource,
+                                x: Math.random() * self.positionRange,
+                                y: Math.random() * self.positionRange,
+                                width: Math.random() * self.sizeRange,
+                                success: function() {
+                                    self.updateCount();
+                                }
+                            });
+                        }
+                    });
                 },
 
                 // ----------
                 animate: function() {
                     var self = this;
 
-                    var item = this.viewer.world.getItemAt(this.index);
-                    item.setPosition(new OpenSeadragon.Point(Math.random() * this.positionRange,
-                        Math.random() * this.positionRange));
+                    if (!this.paused) {
+                        var item = this.viewer.world.getItemAt(this.index);
+                        item.setPosition(new OpenSeadragon.Point(Math.random() * this.positionRange,
+                            Math.random() * this.positionRange));
 
-                    item.setWidth(Math.random() * this.sizeRange);
+                        item.setWidth(Math.random() * this.sizeRange);
 
-                    this.index = (this.index + 1) % this.viewer.world.getItemCount();
+                        this.index = (this.index + 1) % this.viewer.world.getItemCount();
+                    }
 
                     setTimeout(function() {
                         self.animate();
                     }, this.delay);
+                },
+
+                // ----------
+                updateCount: function() {
+                    $('.count').text(this.viewer.world.getItemCount());
                 }
             };
 
@@ -91,5 +126,10 @@
     </head>
     <body>
         <div id="contentDiv" class="openseadragon1"></div>
+        <div class="controls">
+            <button class="toggle-pause">Pause</button>
+            <button class="add">Add More</button>
+            Image Count: <span class="count"></span>
+        </div>
     </body>
 </html>
