===================================================================
--- original.js
+++ change.js
@@ -117,18 +117,16 @@
 		}
 		// Increment tap counter
 		progressManager.manualGeneration();
 		self.animateBeat();
-		self.animateFrames();
 		// Create a new heart projection using the current frame index
 		if (self.currentGraphic) {
 			projectionsManager.popHearts(self.currentGraphic.heartType);
 		} else {
 			log("CurrentGraphic is not initialized.");
 		}
 		shakeMiddleground();
 	};
-	// Beat Animation
 	self.animateBeat = function () {
 		// Play beat sound
 		LK.getSound('bump').play();
 		if (self.currentGraphic) {
@@ -183,39 +181,57 @@
 				}
 			});
 		}
 	};
-	// Frames Animation
-	self.animateFrames = function () {
-		if (self.explosionTriggered || tapCount >= self.tapLimit * (self.heartType + 1)) {
+	self.updateFramesByProgress = function (progress) {
+		// progress should be between 0 and 1
+		var frameCount = 5; // frames 0 to 4 will have alpha transition, frame 5 is final
+		var frameProgress = progress * frameCount;
+		var currentFrameIndex = 5 - Math.floor(frameProgress); // Invert frame order: 5 to 0
+		var alpha = frameProgress - Math.floor(frameProgress); // Get decimal part for alpha transition
+		// 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 (5) separately
+		if (progress >= 1) {
+			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;
+			}
+			self.nextGraphic = null;
 			return;
 		}
-		// Calculate progress in current level (0 to 1)
-		var progress = (tapCount - self.heartType * self.tapLimit) / self.tapLimit;
-		// Map progress to frame indices (frames go from 5 to 0)
-		var frameProgress = progress * 5;
-		var currentFrame = 5 - Math.floor(frameProgress);
-		var nextFrame = Math.max(0, currentFrame - 1);
-		var alpha = frameProgress - Math.floor(frameProgress);
-		// Update frame visibility only if current frame changed
-		if (self.currentGraphic !== self.heartFrames[self.heartType][currentFrame]) {
-			// Hide all frames
-			self.heartFrames[self.heartType].forEach(function (frame) {
-				return frame.visible = false;
-			});
-			// Setup current and next frames
-			self.currentGraphic = self.heartFrames[self.heartType][currentFrame];
-			self.nextGraphic = self.heartFrames[self.heartType][nextFrame];
-			[self.currentGraphic, self.nextGraphic].forEach(function (frame) {
-				if (frame) {
-					frame.visible = true;
-					frame.scaleX = frame.scaleY = 1.1;
+		// Show next frame first (it will be behind current frame)
+		if (currentFrameIndex > 0) {
+			self.nextGraphic = self.heartFrames[self.heartType][currentFrameIndex - 1];
+			if (self.nextGraphic) {
+				self.nextGraphic.visible = true;
+				self.nextGraphic.scaleX = self.nextGraphic.scaleY = 1.1;
+				self.nextGraphic.alpha = 1; // Keep next frame fully visible
+				// Ensure nextGraphic is behind currentGraphic
+				if (self.nextGraphic.parent) {
+					self.nextGraphic.parent.setChildIndex(self.nextGraphic, 0);
 				}
-			});
+			}
+		} else {
+			self.nextGraphic = null;
 		}
-		// Update alpha for smooth transition
+		// Show current frame on top
+		self.currentGraphic = self.heartFrames[self.heartType][currentFrameIndex];
 		if (self.currentGraphic) {
-			self.currentGraphic.alpha = 1 - alpha;
+			self.currentGraphic.visible = true;
+			self.currentGraphic.scaleX = self.currentGraphic.scaleY = 1.1;
+			self.currentGraphic.alpha = 1 - alpha; // Only fade out current frame
+			// Ensure currentGraphic is above nextGraphic
+			if (self.currentGraphic.parent) {
+				self.currentGraphic.parent.setChildIndex(self.currentGraphic, self.currentGraphic.parent.children.length - 1);
+			}
 		}
 	};
 	// Explosion Animation
 	self.animateExplosion = function (callback) {
@@ -253,8 +269,21 @@
 								frame.visible = false;
 							});
 							self.explosionTriggered = false; // Reset explosion flag
 							cloneGraphic.destroy(); // Remove the clone after animation
+							// Pre-scale the first frame of the next heart type
+							if (self.heartType < 9) {
+								var nextHeartFrame = self.heartFrames[self.heartType + 1][5];
+								if (nextHeartFrame) {
+									tween(nextHeartFrame, {
+										scaleX: 1.1,
+										scaleY: 1.1
+									}, {
+										duration: 300,
+										easing: tween.easeOut
+									});
+								}
+							}
 							if (callback) {
 								callback();
 							}
 						}
@@ -276,9 +305,9 @@
 					});
 				} else {
 					log("No nextGraphic for explosion!");
 				}
-			}, 205);
+			}, 0);
 		}
 	};
 	self.resetGraphics = function () {
 		log("resetGraphics...");
@@ -1131,9 +1160,10 @@
 			tapCount = self.money;
 			// Update highest score if current money is higher
 			if (parseInt(self.money) > parseInt(self.highestScore)) {
 				self.highestScore = self.money;
-				self.checkProgress(); // Only check progress when reaching new heights
+				self.updateHeartProgress();
+				self.checkProgress();
 			}
 		}
 		self.updateGeneratorsUi();
 		if (tempGenerated > 0) {
@@ -1151,14 +1181,21 @@
 		self.money = addLargeNumbers(self.money, "1");
 		// Update highest score if current money is higher
 		if (parseInt(self.money) > parseInt(self.highestScore)) {
 			self.highestScore = self.money;
-			self.checkProgress(); // Only check progress when reaching new heights
+			self.updateHeartProgress();
+			self.checkProgress();
 		}
 		log("manualGeneration Tap count: ", tapCount);
 		updateTapCountText();
 		self.updateGeneratorsUi();
 	};
+	self.updateHeartProgress = function () {
+		var currentLevelTarget = self.tapsPerLevel[self.currentLevel];
+		var score = parseInt(self.highestScore);
+		var progress = Math.min(score / currentLevelTarget, 1);
+		bigHeart.updateFramesByProgress(progress);
+	};
 	self.checkProgress = function () {
 		// Use highestScore instead of tapCount for level progression
 		if (self.highestScore >= self.tapsPerLevel[self.currentLevel]) {
 			if (self.currentLevel < 9) {
@@ -1173,27 +1210,10 @@
 				});
 				bigHeart.animateExplosion(function () {
 					self.currentLevel++;
 					bigHeart.heartType = self.currentLevel;
-					bigHeart.currentGraphic = bigHeart.heartFrames[bigHeart.heartType][5];
-					bigHeart.nextGraphic = bigHeart.heartFrames[bigHeart.heartType][4];
-					bigHeart.currentGraphic.visible = true;
+					self.updateHeartProgress(); // Start new level with correct frame
 					projectionsManager.updateHeartType(bigHeart.heartType);
-					bigHeart.nextGraphic.visible = true;
-					tween(bigHeart.currentGraphic, {
-						scaleX: 1.1,
-						scaleY: 1.1
-					}, {
-						duration: 300,
-						easing: tween.easeOut
-					});
-					tween(bigHeart.nextGraphic, {
-						scaleX: 1.1,
-						scaleY: 1.1
-					}, {
-						duration: 300,
-						easing: tween.easeOut
-					});
 				});
 			}
 		}
 	};