In the component I have an animation, a line is drawn along the path of the SVG. It is divided into several steps, everything is fine with this, it works fine.
const path_length = anime.setDashoffset(svgPath);
const step1 = 3600;
const step2 = 2000;
const step3 = 400;
const line123 = anime.timeline({
easing: 'easeInOutSine',
duration: 8500,
loop: false,
});
line123
.add({
targets: svgPath,
strokeDashoffset: {
value: [path_length, step1],
easing: 'easeInOutSine',
duration: 2500
}
})
.add(
{
targets: svgPath,
strokeDashoffset: {
value: [step1, step2],
easing: 'easeInOutSine',
duration: 2500
}
},
'+=1000'
)
.add(
{
targets: svgPath,
strokeDashoffset: {
value: [step2, step3],
easing: 'easeInOutSine',
duration: 2500
}
},
'+=1000'
)
.add(
{
targets: svgPath,
strokeDashoffset: {
value: [step3, 0],
easing: 'easeInOutSine',
duration: 1000
}
},
'+=1000'
);
Now I need a certain element to “ride” in front of this line, on its “head”, so to speak. There is an element, you can draw it along the entire line using this:
anime({
targets: '.wrapper .placemark123',
translateX: marker_path('x'),
translateY: marker_path('y'),
easing: 'easeInOutSine',
duration: 8500
});
The goal is to make the mark also move with the line. Following the same steps, with the same delays. Please help me implement this.