How to make a block move along a parabola?

Question

css

Using jQuery animate, I animate the movement of an object, but I need the object to move along a parabola, is it possible to somehow do this by setting only the start and end coordinates, and so that the rest is generated automatically?

In the example, the conditional code reflecting the essence of the question:

<div class="block" style="left: 50px; top: 0"/></div>

$('.block').animate({
  left: 0,
  top: 100
}, 1000);

Answer 1

A parabola cannot be built from two points.

Answer 2

In order of delirium

@keyframes anim {
  0% {
    transform: translate(-30px, 90px);
  }
  10% {
    transform: translate(-24px, 57.6px);
  }
  20% {
    transform: translate(-18px, 32.4px);
  }
  30% {
    transform: translate(-12px, 14.4px);
  }
  40% {
    transform: translate(-6px, 3.6px);
  }
  50% {
    transform: translate(0px, 0px);
  }
  60% {
    transform: translate(6px, 3.6px);
  }
  70% {
    transform: translate(12px, 14.4px);
  }
  80% {
    transform: translate(18px, 32.4px);
  }
  90% {
    transform: translate(24px, 57.6px);
  }
  100% {
    transform: translate(30px, 90px);
  }
}

And so through JS( requestAnimationFrame and sin/cos )
www.the-art-of-web.com/javascript/animate-curved-path

Answer 3

Alternatively, make 2 nested animations. The object itself should be moved up and down with a slowdown in the middle, and the container with this animation should be moved linearly horizontally. But how effective it will be - you need to test.

Answer 4

ax2+bx+c = 0
Standard quadratic equation, which has 3 solutions:
1. 2 points of intersection with the x-axis
2. One point (when the x-axis is tangent to the extremum of the function)
3. Has no intersections. That is, there is no graphic solution. This equation can also be solved, but you need to change the parameter c before and after the solution.