From ee7f5d4cd82f1e07dcb1d22ba953a18033f097a5 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 22 Jun 2024 14:18:23 +0200 Subject: clean up animations when map scrolls by card row shrinking --- play.js | 49 ++++++++++++++++++++++++++++++++----------------- 1 file 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 } -- cgit v1.2.3