I'm attempting to use an SVG element and the AnimeJS library to make the orange marker follow the course of this RC car race track.
https://i.stack.imgur.com/8FKHC.png
Despite my efforts, I am encountering strange and undesirable outcomes.
At times, I observe the marker following a path that is offset from the course and not in the correct scale. Other times, although the marker is moving, it is not visible but I can see the scrollbars on my page adjusting, indicating its presence and movement.
When inspecting the browser's developer tools, I notice rapid changes in the element's styles - translateX, translateY, and rotate.
The code given shows the marker in motion. In the JSFiddle demo, if you carefully watch and wait for 9.49 seconds for each lap to complete, you may catch a brief glimpse of an orange ball which appears disconnected from the track and not correctly scaled.
What could be causing these issues? How can this functionality be achieved successfully? I am open to exploring alternative libraries or tools to accomplish this task.
HTML
<section id="race-event-overview">
[...]
<div class="race-track-map">
<svg class="race-track" viewBox="0 0 560 350" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<path class="track"
d="M648.018 1019s-26.755-194 194-194H2618.98c220.76 0 194 194 194 194v527h-.24s10.84 139-112.49 139-112.49-139-112.49-139h-.24v-286s11.83-148-109.52-148H1413s-81-1.45-81 111c0 0-11.07 108 127...
</svg>
</div>
</section>
SCSS:
#race-event-overview {
position: relative;
height: 500px;
background: #242D33;
.race-track-map {
position: absolute;
top: 75px;
right: 0;
svg {
height: 350px;
width: 560px;
}
}
}
JS:
var path = anime.path('.race-track .track');
anime({
targets: '.race-track .ball',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 9490,
loop: true
});