diff --git a/examples/export/runtimes.sh b/examples/export/runtimes.sh
index e68ef10cd..b1a72b827 100755
--- a/examples/export/runtimes.sh
+++ b/examples/export/runtimes.sh
@@ -373,8 +373,8 @@ cp -f ../mix-and-match/export/mix-and-match-pma.png "$ROOT/spine-ts/spine-phaser
 
 rm "$ROOT/spine-ts/spine-pixi/example/assets/"*
 cp -f ../raptor/export/raptor-pro.json "$ROOT/spine-ts/spine-pixi/example/assets/"
-cp -f ../raptor/export/raptor-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
-cp -f ../raptor/export/raptor-pma.png "$ROOT/spine-ts/spine-pixi/example/assets/"
+cp -f ../raptor/export/raptor.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
+cp -f ../raptor/export/raptor.png "$ROOT/spine-ts/spine-pixi/example/assets/"
 
 cp -f ../spineboy/export/spineboy-pro.skel "$ROOT/spine-ts/spine-pixi/example/assets/"
 cp -f ../spineboy/export/spineboy-pma.atlas "$ROOT/spine-ts/spine-pixi/example/assets/"
diff --git a/spine-ts/index.html b/spine-ts/index.html
index 611c27c62..c038070d1 100644
--- a/spine-ts/index.html
+++ b/spine-ts/index.html
@@ -19,6 +19,7 @@
 		<li>Pixi</li>
 		<ul>
 			<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
+			<li><a href="/spine-pixi/example/events-example.html">Events example</a></li>
 		</ul>
 		<li>Phaser</li>
 		<ul>
diff --git a/spine-ts/spine-pixi/example/events-example.html b/spine-ts/spine-pixi/example/events-example.html
new file mode 100644
index 000000000..ba13b75d1
--- /dev/null
+++ b/spine-ts/spine-pixi/example/events-example.html
@@ -0,0 +1,69 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+  </head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body,
+    html {
+      height: 100%;
+    }
+
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Create the spine display object
+        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+          scale: 0.5,
+        });
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
+
+        // Set callbacks to receive animation state events
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/spine-ts/spine-pixi/example/index.html b/spine-ts/spine-pixi/example/index.html
index b202bf1e6..644cc71c0 100644
--- a/spine-ts/spine-pixi/example/index.html
+++ b/spine-ts/spine-pixi/example/index.html
@@ -1,140 +1,67 @@
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+  </head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
 
-<head>
-	<meta charset="UTF-8">
-	<title>spine-pixi</title>
-	<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
-	<script src="../dist/iife/spine-pixi.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
-</head>
-<style>
-	* {
-		margin: 0;
-		padding: 0;
-	}
+    body,
+    html {
+      height: 100%;
+    }
 
-	body,
-	html {
-		height: 100%
-	}
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 
-	canvas {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-</style>
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
 
-<body>
-	<script>
-		(async function () {
-			var app = new PIXI.Application({
-				width: window.innerWidth,
-				height: window.innerHeight,
-				resolution: window.devicePixelRatio || 1,
-				autoDensity: true,
-				resizeTo: window,
-				backgroundColor: 0x2c3e50,
-				hello:true
-			});
-			document.body.appendChild(app.view);
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
 
-			// Feel free to mix and match the binary skeleton, the json skeleton, the rect atlas and the polypack atlas
-			// You only need one skeleton and one atlas, the rest is just to show how to load different formats
-			PIXI.Assets.add("spineboySkeletonJson", "./assets/spineboy-pro.json");
-			PIXI.Assets.add("spineboySkeletonBinary", "./assets/spineboy-pro.skel");
-			PIXI.Assets.add("spineboyAtlas", "./assets/spineboy.atlas");
-			PIXI.Assets.add("spineboyAtlasPolypack", "./assets/spineboy-polypack.atlas");
+        // Create the spine display object
+        const spineboy = spine.Spine.from("spineboyData", "spineboyAtlas", {
+          scale: 0.5,
+        });
 
-			await PIXI.Assets.load([
-				"spineboySkeletonJson",
-				"spineboySkeletonBinary",
-				"spineboyAtlas",
-				"spineboyAtlasPolypack"
-			]);
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
 
-			// Create the spine display object
-			const spineBoy = spine.Spine.from("spineboySkeletonJson", "spineboyAtlas", { scale: 0.5 });
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
 
-			// .from(...) is a shortcut + cache for creating the skeleton data at a certain scale
-			// Here would be the "long way" of doing it (without cache):
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
 
-			// const skeletonAsset = Assets.get(skeletonAssetName);
-			// const atlasAsset = Assets.get(atlasAssetName);
-			// const attachmentLoader = new AtlasAttachmentLoader(atlasAsset);
-			// let parser; // You can skip this guessing step if you know the type of the skeleton asset
-			// if (skeletonAsset instanceof Uint8Array) {
-			// 	parser = new SkeletonBinary(attachmentLoader);
-			// } else {
-			// 	parser = new SkeletonJson(attachmentLoader);
-			// }
-			// parser.scale = options?.scale ?? 1;
-			// skeletonData = parser.readSkeletonData(skeletonAsset);
-			// onst spineBoy = new spine.Spine(skeletonData, options);
-
-
-			// Set the position
-			spineBoy.x = window.innerWidth / 2;
-			spineBoy.y = window.innerHeight * 0.9;
-
-			// start an animation. AutoUpdate is on by default, we don't need a manual rAF loop
-			spineBoy.state.setAnimation(0, "run", true);
-
-			// add to stage
-			app.stage.addChild(spineBoy);
-
-			// do we want debug? we can have debug!
-			const spinedebugger = new spine.SpineDebugRenderer();
-			spineBoy.debug = spinedebugger;
-
-			// End of spine setup. The rest is the tweakpane on the right to play with the spineboy
-
-			const pane = new Tweakpane.Pane({ title: 'spine pixi.js' });
-
-			// spineboy position on screen
-			pane.addInput(spineBoy, 'position', {
-				x: { min: 0, max: window.innerWidth },
-				y: { min: 0, max: window.innerHeight },
-			});
-
-			// Interesting example on how to get the pixi global position of a bone, and how to set a bone to a pixi global position
-			// spine's "global" position is local to the spine display object. It's not the same as pixi's global position
-			const aux = {aimPosition:spineBoy.toGlobal(spineBoy.getBonePosition("crosshair"))};
-			const aimControl = pane.addInput(aux, 'aimPosition', {
-				x: { min: 0, max: window.innerWidth },
-				y: { min: 0, max: window.innerHeight },
-			}).on("change", (e) => {
-				spineBoy.setBonePosition("crosshair", spineBoy.toLocal(e.value));
-			})
-			aimControl.hidden = true;
-
-			// anim changer
-			pane.addBlade({
-				view: 'list',
-				label: 'animation',
-				options: spineBoy.skeleton.data.animations.map(a => ({ text: a.name, value: a.name })),
-				value: 'run',
-			}).on("change", (e) => {
-				spineBoy.state.setAnimation(0, e.value, true);
-				aimControl.hidden = !(e.value == "aim")
-			})
-
-			// turn on or off debug draws
-			const debugFolder = pane.addFolder({
-				title: 'Debug options',
-			});
-
-			debugFolder.addInput(spinedebugger, 'drawMeshHull');
-			debugFolder.addInput(spinedebugger, 'drawMeshTriangles');
-			debugFolder.addInput(spinedebugger, 'drawBones');
-			debugFolder.addInput(spinedebugger, 'drawPaths');
-			debugFolder.addInput(spinedebugger, 'drawBoundingBoxes');
-			debugFolder.addInput(spinedebugger, 'drawClipping');
-			debugFolder.addInput(spinedebugger, 'drawRegionAttachments');
-			debugFolder.addInput(spinedebugger, 'drawEvents');
-
-		})();
-	</script>
-</body>
-
-</html>
\ No newline at end of file
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/spine-ts/spine-pixi/example/manual-loading.html b/spine-ts/spine-pixi/example/manual-loading.html
new file mode 100644
index 000000000..babf71c7b
--- /dev/null
+++ b/spine-ts/spine-pixi/example/manual-loading.html
@@ -0,0 +1,74 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>spine-pixi</title>
+    <script src="https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/dist/pixi.min.js"></script>
+    <script src="../dist/iife/spine-pixi.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.1.9/dist/tweakpane.min.js"></script>
+  </head>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body,
+    html {
+      height: 100%;
+    }
+
+    canvas {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <body>
+    <script>
+      (async function () {
+        var app = new PIXI.Application({
+          width: window.innerWidth,
+          height: window.innerHeight,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+          resizeTo: window,
+          backgroundColor: 0x2c3e50,
+          hello: true,
+        });
+        document.body.appendChild(app.view);
+
+        // Pre-load the skeleton data and atlas. You can also load .json skeleton data.
+        PIXI.Assets.add("spineboyData", "./assets/spineboy-pro.skel");
+        PIXI.Assets.add("spineboyAtlas", "./assets/spineboy-pma.atlas");
+        await PIXI.Assets.load(["spineboyData", "spineboyAtlas"]);
+
+        // Manually load the data and create a Spine display object from it using
+        // the Spine core API. This will not use the interal cache like Spine.from(),
+        // so you have to cache data yourself.
+        const atlas = PIXI.Assets.get("spineboyAtlas");
+        const attachmentLoader = new spine.AtlasAttachmentLoader(atlas);
+        const binaryLoader = new spine.SkeletonBinary(attachmentLoader);
+        binaryLoader.scale = 0.5;
+        const skeletonData = binaryLoader.readSkeletonData(
+          PIXI.Assets.get("spineboyData")
+        );
+        const spineboy = new spine.Spine(skeletonData);
+
+        // Set the default mix time to use when transitioning
+        // from one animation to the next.
+        spineboy.state.data.defaultMix = 0.2;
+
+        // Center the spine object on screen.
+        spineboy.x = window.innerWidth / 2;
+        spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
+
+        // Set animation "run" on track 0, looped.
+        spineboy.state.setAnimation(0, "run", true);
+
+        // Add the display object to the stage.
+        app.stage.addChild(spineboy);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/spine-ts/spine-pixi/src/Spine.ts b/spine-ts/spine-pixi/src/Spine.ts
index 5b824c472..8e8691aa6 100644
--- a/spine-ts/spine-pixi/src/Spine.ts
+++ b/spine-ts/spine-pixi/src/Spine.ts
@@ -122,23 +122,8 @@ export class Spine extends Container {
 		this.state = new AnimationState(animData);
 		this.autoUpdate = options?.autoUpdate ?? true;
 		this.slotMeshFactory = options?.slotMeshFactory ?? ((): ISlotMesh => new SlotMesh());
-
-
-		/**
-		  * This is locked behind https://github.com/pixijs/pixijs/issues/8957
-		  * I don't want to make a custom event emitter and do `this.spineEvents.on` because that's just as "far" as `this.state.addListener`
-		  * So, until pixi fixes the custom event system, I'll stick to spine native events. - @miltoncandelero
-
-			this.spineListeners = {
-				complete: (trackEntry) => this.emit("complete", trackEntry),
-				dispose: (trackEntry) => this.emit("dispose", trackEntry),
-				end: (trackEntry) => this.emit("end", trackEntry),
-				event: (trackEntry, event) => this.emit("event", trackEntry, event),
-				interrupt: (trackEntry) => this.emit("interrupt", trackEntry),
-				start: (trackEntry) => this.emit("start", trackEntry),
-			};
-			this.state.addListener(this.spineListeners);
-		*/
+		this.skeleton.setToSetupPose();
+		this.skeleton.updateWorldTransform();
 	}
 
 	public update (deltaSeconds: number): void {
