diff --git a/site/docs/04-graphics/04.2-animation.mdx b/site/docs/04-graphics/04.2-animation.mdx
index ac172d418..09dc0f527 100644
--- a/site/docs/04-graphics/04.2-animation.mdx
+++ b/site/docs/04-graphics/04.2-animation.mdx
@@ -2,6 +2,7 @@
 slug: /animation
 ---
 import AnimationExample from '!!raw-loader!./examples/animation.ts'
+import AnimationExample2 from '!!raw-loader!./examples/animation-coords.ts'
 import playerRun from './examples/player-run.png'
 
 # Animation
@@ -76,7 +77,7 @@ export enum AnimationStrategy {
 }
 ```
 
-Animation frames can be created by hand in the following example
+
 
 
 ```ts twoslash
@@ -85,7 +86,11 @@ Animation frames can be created by hand in the following example
 // @include: animation
 ```
 
-Animations can be constructed quickly from [`ex.SpriteSheets`](#SpriteSheet)
+## Animation From SpriteSheet
+
+Animations can also be constructed quickly from [`ex.SpriteSheets`](#SpriteSheet).
+
+Animation frames can be created by hand in the following example by specifying the sprite sheet indices from the top left, top to bottom (row major order).
 
 ![Character running sprite sheet](player-run.png)
 
@@ -95,6 +100,16 @@ Animations can be constructed quickly from [`ex.SpriteSheets`](#SpriteSheet)
   assets={{'player-run.png': playerRun}} 
 />
 
+Additionally you can specify the (x, y) positions of sprites in the SpriteSheet of each frame, for example (0, 0) is the the top left sprite, (0, 1) is the sprite directly below that, and so on.
+
+<GameCodeBlock 
+  live 
+  code={AnimationExample2} 
+  assets={{'player-run.png': playerRun}} 
+/>
+
+## Events
+
 Animations also emit events per frame, per loop, and per end (if it completes).
 
 ```ts twoslash
diff --git a/site/docs/04-graphics/examples/animation-coords.ts b/site/docs/04-graphics/examples/animation-coords.ts
new file mode 100644
index 000000000..1a29279b2
--- /dev/null
+++ b/site/docs/04-graphics/examples/animation-coords.ts
@@ -0,0 +1,35 @@
+import playerRun from './player-run.png';
+
+const runImage = new ex.ImageSource(playerRun);
+
+const runSheet = ex.SpriteSheet.fromImageSource({
+    image: runImage,
+    grid: {
+        rows: 1,
+        columns: 21,
+        spriteWidth: 96,
+        spriteHeight: 96
+    }
+});
+
+const runAnim = ex.Animation.fromSpriteSheetCoordinates({
+  spriteSheet: runSheet,
+  durationPerFrameMs: 200,
+  frameCoordinates: [
+    {x: 1, y: 0},
+    {x: 2, y: 0},
+    {x: 3, y: 0},
+    {x: 4, y: 0},
+    {x: 5, y: 0}
+  ]
+});
+
+const actor = new ex.Actor({
+    pos: ex.vec(game.halfDrawWidth, game.halfDrawHeight)
+});
+actor.graphics.use(runAnim);
+
+const loader = new ex.Loader([runImage]);
+game.start(loader).then(() => {
+    game.currentScene.add(actor);
+});
diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts
index 7d12bf343..dcc2a9650 100644
--- a/site/docusaurus.config.ts
+++ b/site/docusaurus.config.ts
@@ -255,7 +255,7 @@ const config: Config = {
           items: [
             {
               label: 'Tutorial',
-              to: '/docs/intro'
+              to: '/docs/getting-started'
             }
           ]
         },
diff --git a/site/package.json b/site/package.json
index 294963e2f..813a0e9b2 100644
--- a/site/package.json
+++ b/site/package.json
@@ -42,7 +42,8 @@
     "@types/react": "^18.3.3",
     "micromark-extension-mdxjs": "^3.0.0",
     "patch-package": "^8.0.0",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "9.5.1",
+    "css-loader": "6.8.1",
     "typescript": "~5.2.2",
     "url-loader": "^4.1.1"
   },
diff --git a/src/engine/Graphics/Animation.ts b/src/engine/Graphics/Animation.ts
index 60e1e5940..9ae033d35 100644
--- a/src/engine/Graphics/Animation.ts
+++ b/src/engine/Graphics/Animation.ts
@@ -251,8 +251,8 @@ export class Animation extends Graphic implements HasTick {
    *  frameCoordinates: [
    *    {x: 0, y: 5, duration: 100, options { flipHorizontal: true }},
    *    {x: 1, y: 5, duration: 200},
-   *    {x: 2, y: 5, duration: 100},
-   *    {x: 3, y: 5, duration: 500}
+   *    {x: 2, y: 5},
+   *    {x: 3, y: 5}
    *  ],
    *  strategy: AnimationStrategy.PingPong
    * });