diff --git a/packages/graphics/animation-view.js b/packages/graphics/animation-view.js
new file mode 100644
index 0000000..9902b83
--- /dev/null
+++ b/packages/graphics/animation-view.js
@@ -0,0 +1,49 @@
+import {hasGraphics} from './has-graphics';
+import {Container} from './container';
+import {Image} from './image';
+import {Renderable} from './renderable';
+import {Sprite} from './sprite';
+
+export class AnimationView extends Renderable {
+
+  constructor(animation) {
+    super();
+    this.animation = animation;
+    this.container = new Container();
+    if (hasGraphics) {
+      Image.load(this.animation.imageUri).then((image) => {
+        this.sprite = new Sprite(image);
+        this.container.addChild(this.sprite);
+        this.resetSourceRectangle();
+      });
+      animation.on(['directionChanged', 'indexChanged'], () => {
+        if (this.sprite) {
+          this.resetSourceRectangle();
+        }
+      });
+    }
+  }
+
+  destroy() {
+    if (this.sprite) {
+      this.sprite.destroy();
+    }
+  }
+
+  get internal() {
+    return this.container.internal;
+  }
+
+  reset() {
+    this.animation.reset();
+  }
+
+  resetSourceRectangle() {
+    this.sprite.sourceRectangle = this.animation.sourceRectangle;
+  }
+
+  tick() {
+    this.animation.tick();
+  }
+
+}
diff --git a/packages/graphics/index.js b/packages/graphics/index.js
index 99a14b7..4441068 100644
--- a/packages/graphics/index.js
+++ b/packages/graphics/index.js
@@ -1,3 +1,4 @@
+export {AnimationView} from './animation-view';
 export {Color} from './color';
 export {Container} from './container';
 export {hasGraphics} from './has-graphics';