clean up animations when map scrolls by card row shrinking

1 files changed, 32 insertions, 17 deletions

diff --git a/play.js b/play.js
index 8411ea8..4c37ce5 100644
--- a/play.js
+++ b/play.js
@@ -112,36 +112,51 @@ var animation_list = []
 function remember_position(e) {
 	if (e.parentElement) {
 		animation_list.push(e)
+		let prect = e.parentElement.getBoundingClientRect()
 		let rect = e.getBoundingClientRect()
+		e.my_visible = 1
 		e.my_parent = e.parentElement
+		e.my_px = prect.x
+		e.my_py = prect.y
 		e.my_x = rect.x
 		e.my_y = rect.y
 	} else {
+		e.my_visible = 0
 		e.my_parent = null
 		e.my_x = 0
 		e.my_y = 0
+		e.my_z = 0
 	}
 }
 
-function animate_positions() {
-	for (let e of animation_list) {
-		if (e.parentElement) {
-			if (e.my_parent) {
-				let rect = e.getBoundingClientRect()
-				let dx = e.my_x - rect.x
-				let dy = e.my_y - rect.y
-				if (dx !== 0 || dy !== 0) {
-					e.animate(
-						[
-							{ transform: `translate(${dx}px, ${dy}px)`, },
-							{ transform: "translate(0, 0)", },
-						],
-						{ duration: 333, easing: "ease" }
-					)
-				}
-			}
+function animate_position(e) {
+	if (e.parentElement && e.my_visible) {
+		let prect = e.parentElement.getBoundingClientRect()
+		let rect = e.getBoundingClientRect()
+		let dx, dy
+		if (e.parentElement === e.my_parent) {
+			dx = (e.my_x - e.my_px) - (rect.x - prect.x)
+			dy = (e.my_y - e.my_py) - (rect.y - prect.y)
+		} else {
+			dx = e.my_x - rect.x
+			dy = e.my_y - rect.y
+		}
+		if (dx !== 0 || dy !== 0) {
+			let dist = Math.sqrt((dx * dx) + (dy * dy))
+			e.animate(
+				[
+					{ transform: `translate(${dx}px, ${dy}px)`, },
+					{ transform: "translate(0, 0)", },
+				],
+				{ duration: 333, easing: "ease" }
+			)
 		}
 	}
+}
+
+function animate_positions() {
+	for (let e of animation_list)
+		animate_position(e)
 	animation_list.length = 0
 }