===================================================================
--- original.js
+++ change.js
@@ -70,23 +70,23 @@
 		return Array(6).fill(null);
 	}); // Initialize heartFrames as a 2D array
 	for (var type = 9; type >= 0; type--) {
 		self.heartFrames[type] = [];
-		for (var i = 0; i <= 5; i++) {
-			self.heartFrames[type][i] = self.attachAsset('heart_' + type + '_frame_' + (5 - i), {
+		for (var i = 5; i >= 0; i--) {
+			self.heartFrames[type][5 - i] = self.attachAsset('heart_' + type + '_frame_' + i, {
 				anchorX: 0.5,
 				anchorY: 0.5,
 				scaleX: 0.9,
 				scaleY: 0.9,
 				heartType: type,
-				index: i,
-				visible: i === 0
+				index: 5 - i,
+				visible: !i
 			});
 		}
 	}
 	log("Setting frames in constructor...");
-	self.currentGraphic = self.heartFrames[self.heartType][0];
-	self.nextGraphic = self.heartFrames[self.heartType][1];
+	self.currentGraphic = self.heartFrames[self.heartType][5];
+	self.nextGraphic = self.heartFrames[self.heartType][4];
 	if (self.currentGraphic) {
 		if (self.currentGraphic && self.currentGraphic.scaleX !== undefined) {
 			self.currentGraphic.scaleX = 1.1;
 		}
@@ -183,30 +183,81 @@
 		}
 	};
 	self.updateFramesByProgress = function (progress) {
 		log("=== updateFramesByProgress ===");
-		log("- progress:", progress);
+		log("Raw progress:", progress);
+		// Progress is already tap count / tapsPerLevel, so we need to scale it to frames
+		// Each frame gets 20% of progress (0.2 per frame)
+		var frameProgress = progress * 5; // Convert progress to frame scale (0-5)
+		log("Progress calculations:");
+		log("- frameProgress:", frameProgress);
+		// Hide all frames of current type
+		self.heartFrames[self.heartType].forEach(function (frame) {
+			if (frame && frame._activeTween) {
+				frame._activeTween.stop();
+			}
+			frame.visible = false;
+		});
+		// Handle the final frame (0) separately - only shown after explosion
 		if (progress >= 1) {
+			log("Progress >= 1, showing frame 0");
 			self.currentGraphic = self.heartFrames[self.heartType][0];
+			if (self.currentGraphic) {
+				self.currentGraphic.visible = true;
+				self.currentGraphic.scaleX = self.currentGraphic.scaleY = 1.1;
+				self.currentGraphic.alpha = 1;
+				log("Frame 0 set to visible with alpha:", self.currentGraphic.alpha);
+			}
+			self.nextGraphic = null;
 			return;
 		}
-		var frameIndex = Math.floor(progress * 6);
-		var alpha = progress * 6 % 1;
-		log("- frameIndex:", frameIndex);
+		// Calculate frame indices based on progress
+		var currentFrameIndex = 5 - Math.floor(frameProgress);
+		var alpha = 1 - (frameProgress - Math.floor(frameProgress));
+		log("Frame calculations:");
+		log("- heartType:", self.heartType);
+		log("- currentFrameIndex:", currentFrameIndex);
 		log("- alpha:", alpha);
-		if (frameIndex < 5) {
-			self.currentGraphic = self.heartFrames[self.heartType][frameIndex];
-			self.nextGraphic = self.heartFrames[self.heartType][frameIndex + 1];
-			if (self.currentGraphic && self.nextGraphic) {
-				self.currentGraphic.visible = true;
+		// Show next frame first (it will be behind current frame)
+		if (currentFrameIndex > 1) {
+			// Only show next frame if we're not on frame 1
+			self.nextGraphic = self.heartFrames[self.heartType][currentFrameIndex - 1];
+			if (self.nextGraphic) {
 				self.nextGraphic.visible = true;
-				self.currentGraphic.alpha = 1 - alpha;
-				self.nextGraphic.alpha = alpha;
-				log("Current indexes::", self.currentGraphic.index, ',', self.nextGraphic.index);
-				log("- alpha:", self.currentGraphic.alpha);
-				log("- scale:", self.currentGraphic.scaleX);
+				self.nextGraphic.alpha = 1; // Keep next frame fully visible
+				self.nextGraphic.scaleX = self.nextGraphic.scaleY = 1.1;
+				// Ensure nextGraphic is behind currentGraphic
+				if (self.nextGraphic.parent) {
+					//self.nextGraphic.parent.setChildIndex(self.nextGraphic, 0);
+				}
+				log("Next frame setup:");
+				log("- heartType:", self.nextGraphic.heartType);
+				log("- index:", currentFrameIndex - 1);
+				log("- visible:", self.nextGraphic.visible);
+				log("- alpha:", self.nextGraphic.alpha);
+				log("- scale:", self.nextGraphic.scaleX);
 			}
+		} else {
+			log("No next frame (currentFrameIndex <= 1)");
+			self.nextGraphic = null;
 		}
+		// Show current frame on top
+		self.currentGraphic = self.heartFrames[self.heartType][currentFrameIndex];
+		if (self.currentGraphic) {
+			self.currentGraphic.visible = true;
+			self.currentGraphic.alpha = alpha; // Only fade out current frame
+			self.currentGraphic.scaleX = self.currentGraphic.scaleY = 1.1;
+			// Ensure currentGraphic is above nextGraphic
+			if (self.currentGraphic.parent) {
+				//self.currentGraphic.parent.setChildIndex(self.currentGraphic, self.currentGraphic.parent.children.length - 1);
+			}
+			log("Current frame setup:");
+			log("- heartType:", self.currentGraphic.heartType);
+			log("- index:", currentFrameIndex);
+			log("- visible:", self.currentGraphic.visible);
+			log("- alpha:", self.currentGraphic.alpha);
+			log("- scale:", self.currentGraphic.scaleX);
+		}
 		log("=== End updateFramesByProgress ===\n");
 	};
 	self.animateExplosion = function (callback) {
 		if (!self.explosionTriggered) {
@@ -215,9 +266,9 @@
 				LK.getSound('boom').play();
 			}
 			var cloneGraphic;
 			if (self.nextGraphic) {
-				cloneGraphic = LK.getAsset('heart_' + self.nextGraphic.heartType + '_frame_' + (5 - self.nextGraphic.index), {
+				cloneGraphic = LK.getAsset('heart_' + self.nextGraphic.heartType + '_frame_' + self.nextGraphic.index, {
 					anchorX: 0.5,
 					anchorY: 0.5,
 					scaleX: self.nextGraphic.scaleX,
 					scaleY: self.nextGraphic.scaleY,
@@ -228,25 +279,25 @@
 			// Update heart type immediately so new frames are ready
 			if (self.heartType < 9) {
 				var nextHeartType = self.heartType + 1;
 				// Pre-scale both frames of the next heart type
-				tween(self.heartFrames[nextHeartType][0], {
+				tween(self.heartFrames[nextHeartType][5], {
 					scaleX: 1.1,
 					scaleY: 1.1
 				}, {
 					duration: 300,
 					easing: tween.easeOut
 				});
-				tween(self.heartFrames[nextHeartType][1], {
+				tween(self.heartFrames[nextHeartType][4], {
 					scaleX: 1.1,
 					scaleY: 1.1
 				}, {
 					duration: 300,
 					easing: tween.easeOut
 				});
 				// Initialize graphics for new heart type
-				self.currentGraphic = self.heartFrames[nextHeartType][0];
-				self.nextGraphic = self.heartFrames[nextHeartType][1];
+				self.currentGraphic = self.heartFrames[nextHeartType][5];
+				self.nextGraphic = self.heartFrames[nextHeartType][4];
 				// Update heart type and notify projections
 				self.heartType = nextHeartType;
 				projectionsManager.updateHeartType(nextHeartType);
 			}