/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x51ff00
});

/**** 
* Game Code
****/ 
// Create a new instance of the greenarea asset
var greenArea = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2
});
// Add the greenarea to the game
game.addChild(greenArea);
// Add drag functionality to all green areas
var dragNode = null;
var offsetX = 0;
var offsetY = 0;
function addDragFunctionality(area) {
	if (area) {
		area.down = function (x, y, obj) {
			dragNode = area;
			offsetX = x - area.x;
			offsetY = y - area.y;
		};
		area.up = function (x, y, obj) {
			dragNode = null;
		};
		area.move = function (x, y, obj) {
			if (dragNode) {
				tween(dragNode, {
					x: x - offsetX,
					y: y - offsetY
				}, {
					duration: 200,
					easing: tween.easeInOut
				});
				syncGreenAreas(dragNode);
			}
		};
	}
}
addDragFunctionality(greenArea);
addDragFunctionality(greenAreaTop);
addDragFunctionality(greenAreaBottom);
addDragFunctionality(greenAreaBottomLeft);
addDragFunctionality(greenAreaBottomRight);
addDragFunctionality(greenAreaLeft);
addDragFunctionality(greenAreaTopLeft);
addDragFunctionality(greenAreaRight);
addDragFunctionality(greenAreaTopRight);
// Initialize greenArea variables
var greenAreaTop = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2 - 500
});
game.addChild(greenAreaTop);
var greenAreaBottom = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2 + 500
});
game.addChild(greenAreaBottom);
var greenAreaBottomLeft = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2 - 500,
	y: 2732 / 2 + 500
});
game.addChild(greenAreaBottomLeft);
var greenAreaBottomRight = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2 + 500,
	y: 2732 / 2 + 500
});
game.addChild(greenAreaBottomRight);
var greenAreaLeft = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2 - 500,
	y: 2732 / 2
});
game.addChild(greenAreaLeft);
var greenAreaTopLeft = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2 - 500,
	y: 2732 / 2 - 500
});
game.addChild(greenAreaTopLeft);
var greenAreaRight = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2 + 500,
	y: 2732 / 2
});
game.addChild(greenAreaRight);
var greenAreaTopRight = LK.getAsset('greenarea', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2 + 500,
	y: 2732 / 2 - 500
});
game.addChild(greenAreaTopRight);
// Function to synchronize all green areas
function syncGreenAreas(draggedArea) {
	if (draggedArea) {
		var offsetX = draggedArea.x - 2048 / 2;
		var offsetY = draggedArea.y - 2732 / 2;
	} else {
		console.error("draggedArea is not initialized");
		return;
	}
	greenAreaTop.x = 2048 / 2 + offsetX;
	greenAreaTop.y = 2732 / 2 - 500 + offsetY;
	greenAreaBottom.x = 2048 / 2 + offsetX;
	greenAreaBottom.y = 2732 / 2 + 500 + offsetY;
	greenAreaBottomLeft.x = 2048 / 2 - 500 + offsetX;
	greenAreaBottomLeft.y = 2732 / 2 + 500 + offsetY;
	greenAreaBottomRight.x = 2048 / 2 + 500 + offsetX;
	greenAreaBottomRight.y = 2732 / 2 + 500 + offsetY;
	greenAreaLeft.x = 2048 / 2 - 500 + offsetX;
	greenAreaLeft.y = 2732 / 2 + offsetY;
	greenAreaTopLeft.x = 2048 / 2 - 500 + offsetX;
	greenAreaTopLeft.y = 2732 / 2 - 500 + offsetY;
	greenAreaRight.x = 2048 / 2 + 500 + offsetX;
	greenAreaRight.y = 2732 / 2 + offsetY;
	greenAreaTopRight.x = 2048 / 2 + 500 + offsetX;
	greenAreaTopRight.y = 2732 / 2 - 500 + offsetY;
}

===================================================================
--- original.js
+++ change.js
@@ -37,10 +37,15 @@
 			dragNode = null;
 		};
 		area.move = function (x, y, obj) {
 			if (dragNode) {
-				dragNode.x = x - offsetX;
-				dragNode.y = y - offsetY;
+				tween(dragNode, {
+					x: x - offsetX,
+					y: y - offsetY
+				}, {
+					duration: 200,
+					easing: tween.easeInOut
+				});
 				syncGreenAreas(dragNode);
 			}
 		};
 	}