diff --git a/frontend/src/passagesPanel.tsx b/frontend/src/passagesPanel.tsx index 359c0f5..3a7cdde 100644 --- a/frontend/src/passagesPanel.tsx +++ b/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 (
@@ -86,8 +106,11 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
{renderLinePicto(props.line, styles)}
- - + + {props.destination}