===================================================================
--- original.js
+++ change.js
@@ -1,5 +1,10 @@
 /**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+
+/**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
 	backgroundColor: 0x000000
@@ -7,10 +12,10 @@
 
 /**** 
 * Game Code
 ****/ 
-// Add the first scene background image, centered and covering the game area
 // Add the first scene background image, centered and covering the game area in high definition
+// Add the first scene background image, centered and covering the game area
 var firstSceneBg = LK.getAsset('First', {
 	anchorX: 0.5,
 	anchorY: 0.5,
 	x: 2048 / 2,
@@ -56,219 +61,404 @@
 // Add a handler to move to the second scene on touch/click anywhere
 game.down = function (x, y, obj) {
 	if (onFirstScene) {
 		onFirstScene = false;
-		// Remove first scene elements
-		firstSceneBg.destroy();
-		storyOverlay.destroy();
-		narrativeText.destroy();
-		// Add the second scene background, centered and covering the game area in high definition
-		var secondSceneBg = LK.getAsset('Second', {
-			anchorX: 0.5,
-			anchorY: 0.5,
-			x: 2048 / 2,
-			y: 2732 / 2,
-			width: 2048,
-			height: 2732
+		// Fade out first scene elements
+		tween(firstSceneBg, {
+			alpha: 0
+		}, {
+			duration: 500
 		});
-		game.addChild(secondSceneBg);
-		// Add story overlay image at the bottom of the second scene in high definition
-		var secondStoryOverlay = LK.getAsset('Story', {
-			anchorX: 0.5,
-			anchorY: 1,
-			x: 2048 / 2,
-			y: 2732,
-			width: 2048,
-			height: 800
+		tween(storyOverlay, {
+			alpha: 0
+		}, {
+			duration: 500
 		});
-		game.addChild(secondStoryOverlay);
-		// Add narrative text for the second scene
-		var secondNarrativeText = new Text2("A spark ignites in the darkness.\nA new journey begins tonight.", {
-			size: 90,
-			fill: 0x000000,
-			align: "center",
-			wordWrap: true,
-			wordWrapWidth: 1800,
-			fontWeight: "bold",
-			font: "Times New Roman"
-		});
-		secondNarrativeText.anchor.set(0.5, 0);
-		secondNarrativeText.x = 2048 / 2;
-		secondNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
-		game.addChild(secondNarrativeText);
-		// Add handler for third scene transition
-		var onSecondScene = true;
-		game.down = function (x, y, obj) {
-			if (onSecondScene) {
-				onSecondScene = false;
-				// Remove second scene elements
-				secondSceneBg.destroy();
-				secondStoryOverlay.destroy();
-				secondNarrativeText.destroy();
-				// Add the third scene background, centered and covering the game area in high definition
-				var thirdSceneBg = LK.getAsset('Third', {
+		tween(narrativeText, {
+			alpha: 0
+		}, {
+			duration: 500,
+			onFinish: function onFinish() {
+				// Remove first scene elements after fade out
+				firstSceneBg.destroy();
+				storyOverlay.destroy();
+				narrativeText.destroy();
+				// Add the second scene background, centered and covering the game area in high definition
+				var secondSceneBg = LK.getAsset('Second', {
 					anchorX: 0.5,
 					anchorY: 0.5,
 					x: 2048 / 2,
 					y: 2732 / 2,
 					width: 2048,
-					height: 2732
+					height: 2732,
+					alpha: 0
 				});
-				game.addChild(thirdSceneBg);
-				// Add story overlay image at the bottom of the third scene in high definition
-				var thirdStoryOverlay = LK.getAsset('Story', {
+				game.addChild(secondSceneBg);
+				// Add story overlay image at the bottom of the second scene in high definition
+				var secondStoryOverlay = LK.getAsset('Story', {
 					anchorX: 0.5,
 					anchorY: 1,
 					x: 2048 / 2,
 					y: 2732,
 					width: 2048,
-					height: 800
+					height: 800,
+					alpha: 0
 				});
-				game.addChild(thirdStoryOverlay);
-				// Add narrative text for the third scene
-				var thirdNarrativeText = new Text2("The stars align, and destiny calls.\nThe adventure truly begins.", {
+				game.addChild(secondStoryOverlay);
+				// Add narrative text for the second scene
+				var secondNarrativeText = new Text2("A spark ignites in the darkness.\nA new journey begins tonight.", {
 					size: 90,
 					fill: 0x000000,
 					align: "center",
 					wordWrap: true,
 					wordWrapWidth: 1800,
 					fontWeight: "bold",
 					font: "Times New Roman"
 				});
-				thirdNarrativeText.anchor.set(0.5, 0);
-				thirdNarrativeText.x = 2048 / 2;
-				thirdNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
-				game.addChild(thirdNarrativeText);
-				// Add handler for fourth scene transition
-				var onThirdScene = true;
-				game.down = function (x, y, obj) {
-					if (onThirdScene) {
-						onThirdScene = false;
-						// Remove third scene elements
-						thirdSceneBg.destroy();
-						thirdStoryOverlay.destroy();
-						thirdNarrativeText.destroy();
-						// Add the fourth scene background, centered and covering the game area in high definition
-						var fourthSceneBg = LK.getAsset('Fourth', {
+				secondNarrativeText.anchor.set(0.5, 0);
+				secondNarrativeText.x = 2048 / 2;
+				secondNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
+				secondNarrativeText.alpha = 0;
+				game.addChild(secondNarrativeText);
+				// Fade in second scene elements
+				tween(secondSceneBg, {
+					alpha: 1
+				}, {
+					duration: 500
+				});
+				tween(secondStoryOverlay, {
+					alpha: 1
+				}, {
+					duration: 500
+				});
+				tween(secondNarrativeText, {
+					alpha: 1
+				}, {
+					duration: 500
+				});
+			}
+		});
+		// Add handler for third scene transition
+		var onSecondScene = true;
+		game.down = function (x, y, obj) {
+			if (onSecondScene) {
+				onSecondScene = false;
+				// Fade out second scene elements
+				tween(secondSceneBg, {
+					alpha: 0
+				}, {
+					duration: 500
+				});
+				tween(secondStoryOverlay, {
+					alpha: 0
+				}, {
+					duration: 500
+				});
+				tween(secondNarrativeText, {
+					alpha: 0
+				}, {
+					duration: 500,
+					onFinish: function onFinish() {
+						// Remove second scene elements after fade out
+						secondSceneBg.destroy();
+						secondStoryOverlay.destroy();
+						secondNarrativeText.destroy();
+						// Add the third scene background, centered and covering the game area in high definition
+						var thirdSceneBg = LK.getAsset('Third', {
 							anchorX: 0.5,
 							anchorY: 0.5,
 							x: 2048 / 2,
 							y: 2732 / 2,
 							width: 2048,
-							height: 2732
+							height: 2732,
+							alpha: 0
 						});
-						game.addChild(fourthSceneBg);
-						// Add story overlay image at the bottom of the fourth scene in high definition
-						var fourthStoryOverlay = LK.getAsset('Story', {
+						game.addChild(thirdSceneBg);
+						// Add story overlay image at the bottom of the third scene in high definition
+						var thirdStoryOverlay = LK.getAsset('Story', {
 							anchorX: 0.5,
 							anchorY: 1,
 							x: 2048 / 2,
 							y: 2732,
 							width: 2048,
-							height: 800
+							height: 800,
+							alpha: 0
 						});
-						game.addChild(fourthStoryOverlay);
-						// Add narrative text for the fourth scene
-						var fourthNarrativeText = new Text2("A new chapter unfolds beneath the silent moon.\nYour legend is just beginning.", {
+						game.addChild(thirdStoryOverlay);
+						// Add narrative text for the third scene
+						var thirdNarrativeText = new Text2("The stars align, and destiny calls.\nThe adventure truly begins.", {
 							size: 90,
 							fill: 0x000000,
 							align: "center",
 							wordWrap: true,
 							wordWrapWidth: 1800,
 							fontWeight: "bold",
 							font: "Times New Roman"
 						});
-						fourthNarrativeText.anchor.set(0.5, 0);
-						fourthNarrativeText.x = 2048 / 2;
-						fourthNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
-						game.addChild(fourthNarrativeText);
-						// Add handler for fifth scene transition
-						var onFourthScene = true;
-						game.down = function (x, y, obj) {
-							if (onFourthScene) {
-								onFourthScene = false;
-								// Remove fourth scene elements
-								fourthSceneBg.destroy();
-								fourthStoryOverlay.destroy();
-								fourthNarrativeText.destroy();
-								// Add the fifth scene background, centered and covering the game area in high definition
-								var fifthSceneBg = LK.getAsset('Fifth', {
+						thirdNarrativeText.anchor.set(0.5, 0);
+						thirdNarrativeText.x = 2048 / 2;
+						thirdNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
+						thirdNarrativeText.alpha = 0;
+						game.addChild(thirdNarrativeText);
+						// Fade in third scene elements
+						tween(thirdSceneBg, {
+							alpha: 1
+						}, {
+							duration: 500
+						});
+						tween(thirdStoryOverlay, {
+							alpha: 1
+						}, {
+							duration: 500
+						});
+						tween(thirdNarrativeText, {
+							alpha: 1
+						}, {
+							duration: 500
+						});
+					}
+				});
+				// Add handler for fourth scene transition
+				var onThirdScene = true;
+				game.down = function (x, y, obj) {
+					if (onThirdScene) {
+						onThirdScene = false;
+						// Fade out third scene elements
+						tween(thirdSceneBg, {
+							alpha: 0
+						}, {
+							duration: 500
+						});
+						tween(thirdStoryOverlay, {
+							alpha: 0
+						}, {
+							duration: 500
+						});
+						tween(thirdNarrativeText, {
+							alpha: 0
+						}, {
+							duration: 500,
+							onFinish: function onFinish() {
+								// Remove third scene elements after fade out
+								thirdSceneBg.destroy();
+								thirdStoryOverlay.destroy();
+								thirdNarrativeText.destroy();
+								// Add the fourth scene background, centered and covering the game area in high definition
+								var fourthSceneBg = LK.getAsset('Fourth', {
 									anchorX: 0.5,
 									anchorY: 0.5,
 									x: 2048 / 2,
 									y: 2732 / 2,
 									width: 2048,
-									height: 2732
+									height: 2732,
+									alpha: 0
 								});
-								game.addChild(fifthSceneBg);
-								// Add story overlay image at the bottom of the fifth scene in high definition
-								var fifthStoryOverlay = LK.getAsset('Story', {
+								game.addChild(fourthSceneBg);
+								// Add story overlay image at the bottom of the fourth scene in high definition
+								var fourthStoryOverlay = LK.getAsset('Story', {
 									anchorX: 0.5,
 									anchorY: 1,
 									x: 2048 / 2,
 									y: 2732,
 									width: 2048,
-									height: 800
+									height: 800,
+									alpha: 0
 								});
-								game.addChild(fifthStoryOverlay);
-								// Add narrative text for the fifth scene
-								var fifthNarrativeText = new Text2("The journey continues, brighter than ever.\nA new dawn awaits.", {
+								game.addChild(fourthStoryOverlay);
+								// Add narrative text for the fourth scene
+								var fourthNarrativeText = new Text2("A new chapter unfolds beneath the silent moon.\nYour legend is just beginning.", {
 									size: 90,
 									fill: 0x000000,
 									align: "center",
 									wordWrap: true,
 									wordWrapWidth: 1800,
 									fontWeight: "bold",
 									font: "Times New Roman"
 								});
-								fifthNarrativeText.anchor.set(0.5, 0);
-								fifthNarrativeText.x = 2048 / 2;
-								fifthNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
-								game.addChild(fifthNarrativeText);
-								// Add handler for sixth scene transition
-								var onFifthScene = true;
-								game.down = function (x, y, obj) {
-									if (onFifthScene) {
-										onFifthScene = false;
-										// Remove fifth scene elements
-										fifthSceneBg.destroy();
-										fifthStoryOverlay.destroy();
-										fifthNarrativeText.destroy();
-										// Add the sixth scene background, centered and covering the game area in high definition
-										var sixthSceneBg = LK.getAsset('Sixth', {
+								fourthNarrativeText.anchor.set(0.5, 0);
+								fourthNarrativeText.x = 2048 / 2;
+								fourthNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
+								fourthNarrativeText.alpha = 0;
+								game.addChild(fourthNarrativeText);
+								// Fade in fourth scene elements
+								tween(fourthSceneBg, {
+									alpha: 1
+								}, {
+									duration: 500
+								});
+								tween(fourthStoryOverlay, {
+									alpha: 1
+								}, {
+									duration: 500
+								});
+								tween(fourthNarrativeText, {
+									alpha: 1
+								}, {
+									duration: 500
+								});
+							}
+						});
+						// Add handler for fifth scene transition
+						var onFourthScene = true;
+						game.down = function (x, y, obj) {
+							if (onFourthScene) {
+								onFourthScene = false;
+								// Fade out fourth scene elements
+								tween(fourthSceneBg, {
+									alpha: 0
+								}, {
+									duration: 500
+								});
+								tween(fourthStoryOverlay, {
+									alpha: 0
+								}, {
+									duration: 500
+								});
+								tween(fourthNarrativeText, {
+									alpha: 0
+								}, {
+									duration: 500,
+									onFinish: function onFinish() {
+										// Remove fourth scene elements after fade out
+										fourthSceneBg.destroy();
+										fourthStoryOverlay.destroy();
+										fourthNarrativeText.destroy();
+										// Add the fifth scene background, centered and covering the game area in high definition
+										var fifthSceneBg = LK.getAsset('Fifth', {
 											anchorX: 0.5,
 											anchorY: 0.5,
 											x: 2048 / 2,
 											y: 2732 / 2,
 											width: 2048,
-											height: 2732
+											height: 2732,
+											alpha: 0
 										});
-										game.addChild(sixthSceneBg);
-										// Add story overlay image at the bottom of the sixth scene in high definition
-										var sixthStoryOverlay = LK.getAsset('Story', {
+										game.addChild(fifthSceneBg);
+										// Add story overlay image at the bottom of the fifth scene in high definition
+										var fifthStoryOverlay = LK.getAsset('Story', {
 											anchorX: 0.5,
 											anchorY: 1,
 											x: 2048 / 2,
 											y: 2732,
 											width: 2048,
-											height: 800
+											height: 800,
+											alpha: 0
 										});
-										game.addChild(sixthStoryOverlay);
-										// Add narrative text for the sixth scene
-										var sixthNarrativeText = new Text2("The story continues beyond the horizon.\nYour adventure is limitless.", {
+										game.addChild(fifthStoryOverlay);
+										// Add narrative text for the fifth scene
+										var fifthNarrativeText = new Text2("The journey continues, brighter than ever.\nA new dawn awaits.", {
 											size: 90,
 											fill: 0x000000,
 											align: "center",
 											wordWrap: true,
 											wordWrapWidth: 1800,
 											fontWeight: "bold",
 											font: "Times New Roman"
 										});
-										sixthNarrativeText.anchor.set(0.5, 0);
-										sixthNarrativeText.x = 2048 / 2;
-										sixthNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
-										game.addChild(sixthNarrativeText);
+										fifthNarrativeText.anchor.set(0.5, 0);
+										fifthNarrativeText.x = 2048 / 2;
+										fifthNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
+										fifthNarrativeText.alpha = 0;
+										game.addChild(fifthNarrativeText);
+										// Fade in fifth scene elements
+										tween(fifthSceneBg, {
+											alpha: 1
+										}, {
+											duration: 500
+										});
+										tween(fifthStoryOverlay, {
+											alpha: 1
+										}, {
+											duration: 500
+										});
+										tween(fifthNarrativeText, {
+											alpha: 1
+										}, {
+											duration: 500
+										});
 									}
+								});
+								// Add handler for sixth scene transition
+								var onFifthScene = true;
+								game.down = function (x, y, obj) {
+									if (onFifthScene) {
+										onFifthScene = false;
+										// Fade out fifth scene elements
+										tween(fifthSceneBg, {
+											alpha: 0
+										}, {
+											duration: 500
+										});
+										tween(fifthStoryOverlay, {
+											alpha: 0
+										}, {
+											duration: 500
+										});
+										tween(fifthNarrativeText, {
+											alpha: 0
+										}, {
+											duration: 500,
+											onFinish: function onFinish() {
+												// Remove fifth scene elements after fade out
+												fifthSceneBg.destroy();
+												fifthStoryOverlay.destroy();
+												fifthNarrativeText.destroy();
+												// Add the sixth scene background, centered and covering the game area in high definition
+												var sixthSceneBg = LK.getAsset('Sixth', {
+													anchorX: 0.5,
+													anchorY: 0.5,
+													x: 2048 / 2,
+													y: 2732 / 2,
+													width: 2048,
+													height: 2732,
+													alpha: 0
+												});
+												game.addChild(sixthSceneBg);
+												// Add story overlay image at the bottom of the sixth scene in high definition
+												var sixthStoryOverlay = LK.getAsset('Story', {
+													anchorX: 0.5,
+													anchorY: 1,
+													x: 2048 / 2,
+													y: 2732,
+													width: 2048,
+													height: 800,
+													alpha: 0
+												});
+												game.addChild(sixthStoryOverlay);
+												// Add narrative text for the sixth scene
+												var sixthNarrativeText = new Text2("The story continues beyond the horizon.\nYour adventure is limitless.", {
+													size: 90,
+													fill: 0x000000,
+													align: "center",
+													wordWrap: true,
+													wordWrapWidth: 1800,
+													fontWeight: "bold",
+													font: "Times New Roman"
+												});
+												sixthNarrativeText.anchor.set(0.5, 0);
+												sixthNarrativeText.x = 2048 / 2;
+												sixthNarrativeText.y = 2732 - 800 + 80 + 50 + 20;
+												sixthNarrativeText.alpha = 0;
+												game.addChild(sixthNarrativeText);
+												// Fade in sixth scene elements
+												tween(sixthSceneBg, {
+													alpha: 1
+												}, {
+													duration: 500
+												});
+												tween(sixthStoryOverlay, {
+													alpha: 1
+												}, {
+													duration: 500
+												});
+												tween(sixthNarrativeText, {
+													alpha: 1
+												}, {
+													duration: 500
+												});
+											}
+										});
+									}
 								};
 							}
 						};
 					}