CODEWITHSUNDEEP
javascripthtmlcssdomcss-transitions
Umar Munir
Umar Munir

Reputation: 71

How to make an image move on a custom path using JavaScript?

I want to move an arrow along a specific path. I know I have to apply CSS translate to move the arrow but I am having one problem.

The arrow needs to move down, then left, and then upwards until it reaches the same horizontal plain from where it started but to the left of its initial position.

I can move it down, which was the first step. But if I use all three translate methods, it directly takes it to the final position without following the path. I tried putting the three translate methods and their transitions into separate functions and calling each function at the end of the previous step but the result was same.

Here's 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>

Here's the CSS:

#demo, #arrow {
display: block;
margin: 0 auto;
}

#demo {
height: 300px;
}

#arrow {
height: 40px;
position: absolute;
left: 50%;
}

p {
text-align: center;
padding: 20px;
}

Here's the JavaScript:

const arrow = document.getElementById("arrow");
arrow.style.transform = `rotate(90deg)`;

addEventListener('click', () => {
arrow.style.transform = `translate(0px,200px)`;
arrow.style.transition = `2s`;
})

Here's the entire thing.

Upvotes: 1

Views: 1106

Answers (2)

vals
vals

Reputation: 64244

A new CSS property can help you with this.

It's offset-path.

See in the snippet how it can be used for your requested movement

hover container to activate it

Also, note that in Stack overflow it is required that you post an example of your code. Even if it doesn't work !

#container {
  width: 400px;
  height: 150px;
  border: dotted 5px black;
  margin: 30px;
   
}

#motion-demo {
  width: 40px;
  height: 40px;
  background: cyan;
  offset-path: path('M400 0 v 150 h -400 v -150');
   offset-distance: 0%;
   transition: offset-distance 2s;
 }


#container:hover #motion-demo {
    offset-distance: 100%;
}
<div id="container">
<div id="motion-demo"></div>
</div>

Upvotes: 0

Gershom Maes
Gershom Maes

Reputation: 8170

I believe you're looking for the @keyframes css statement, and the animation css property:

@keyframes motion {
  0.000% { left: 30%; top: 70%; }
  33.33% { left: 70%; top: 70%; }
  66.66% { left: 50%; top: 30%; }
  100.0% { left: 30%; top: 70%; }
}

html, body {
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  margin: 0; padding: 0;
}

.point {
  
  position: absolute;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 100%;
  background-color: #500000;
  
  animation: motion 2000ms infinite linear;
  
}
<div class="point"></div>

Upvotes: 1

Related Questions