💄 Animate destination text when they´re too long for panel

frontend/src/passagesPanel.tsx

@@ -1,5 +1,7 @@
-import { VoidComponent, createResource, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
+import { VoidComponent, createResource, onMount, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
 import { createDateNow, getTime } from '@solid-primitives/date';
+
+import { timeline } from '@motionone/dom';
 import { AnimationOptions } from '@motionone/types';
 import { Motion } from "@motionone/solid";
 
@@ -79,6 +81,24 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 	// const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
 	const trafficStatusStyle = { fill: trafficStatusColor.get(TrafficStatus.UNKNOWN) };
 
+	let destinationViewboxRef: SVGSVGElement | undefined = undefined;
+	let destinationTextRef: SVGTextElement | undefined = undefined;
+
+	onMount(() => {
+		if (destinationViewboxRef !== undefined && destinationTextRef !== undefined) {
+			const overlap = destinationTextRef.getComputedTextLength() - destinationViewboxRef.viewBox.baseVal.width;
+			if (overlap > 0) {
+				timeline(
+					[
+						[destinationTextRef, { x: [-overlap] }, { duration: 5 }],
+						[destinationTextRef, { x: [0] }, { duration: 2 }],
+					],
+					{ repeat: Infinity },
+				);
+			}
+		}
+	});
+
 	return (
 		<div class={styles.line}>
 			<div class={styles.transportMode}>
@@ -86,8 +106,11 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 			</div>
 			{renderLinePicto(props.line, styles)}
 			<div class={styles.destination}>
-				<svg viewBox="0 0 600 40">
-					<text x="0" y="50%" dominant-baseline="middle" font-size="40" style={{ fill: "#000000" }}>
+				<svg ref={destinationViewboxRef} viewBox="0 0 600 40">
+					<text ref={destinationTextRef} x="0" y="50%"
+						dominant-baseline="middle"
+						font-size="40"
+						style={{ fill: "#000000" }}>
 						{props.destination}
 					</text>
 				</svg>