I'm trying to animate an arrow along a specific path using CSS translate, but I'm facing a challenge.
The arrow should move downwards, then to the left, and finally upwards until it reaches the same horizontal level as its starting point but to the left of its initial position.
I managed to move it down as the first step. However, when I tried to apply all three translate methods, the arrow went directly to the final position without following the intended path. I attempted separating the translate methods into different functions and calling them sequentially, but the outcome remained unchanged.
Below is a snippet of the HTML:
<div>
<img src="img/arwTest.png" alt="Click to rotate" id="arrow">
<img src="img/moveTest_2.png" alt="demonstration" id="demo">
<p>Click anywhere to move the arrow along the path.</p>
</div>
And here are some relevant CSS styles:
#demo, #arrow {
display: block;
margin: 0 auto;
}
#demo {
height: 300px;
}
#arrow {
height: 40px;
position: absolute;
left: 50%;
}
p {
text-align: center;
padding: 20px;
}
This is the JavaScript code that attempts to animate the arrow:
const arrow = document.getElementById("arrow");
arrow.style.transform = `rotate(90deg)`;
addEventListener('click', () => {
arrow.style.transform = `translate(0px,200px)`;
arrow.style.transition = `2s`;
})
If you're interested in exploring the entire project, feel free to check it out here.