Create Smooth Parabolic Drop Animations with Dynamic Blur in JavaScript

Technical Analysis

The animation can be built with JS, CSS, Canvas, SVG or even GIF, but for the given business scenario JavaScript was chosen for flexibility.

Implementation Analysis

Most animation effects ultimately rely on mathematical formulas; a parabolic animation follows the trajectory defined by a quadratic equation.

Parabolic Equation

y = a*x*x + b*x + c

Using the familiar physics formula l = a*t*t/2 (where l is distance, a is acceleration, t is time), we derive the parameters for the animation.

Step 1 – Determine Start and End Points

Obtain the element’s absolute position in the viewport with getBoundingClientRect(), or use the mouse click coordinates.

Step 2 – Set Parabolic Parameters

Acceleration (a) controls the vertical speed change; a larger positive value can cause flickering at the end of the animation.

Horizontal speed (Xspeed) is usually fixed and determines the animation duration.

When start and end points are fixed, fixing Xspeed also fixes the total time, and acceleration a is computed accordingly.

// Determine start and end points
let XStart = 0, YStart = 0, XEnd = 1000, YEnd = 1000;
// Key parameters
let Xspeed = XX; // horizontal speed
let Time = (XEnd - XStart) / Xspeed;
let A = 2 * (YEnd - YStart) / (Time * Time);

Fixed Duration Example

// Fixed duration
let Time = XX;
let Xspeed = (XEnd - XStart) / Time;
let A = 2 * (YEnd - YStart) / (Time * Time);

Vertical Initial Speed

Setting a negative vertical initial speed creates an upward throw before falling. The acceleration formula becomes:

let A = 2 * (YEnd - YStart - Yspeed * Time) / (Time * Time);

Adjusting Xspeed and Yspeed changes the curve shape; Xspeed determines the horizontal position of the apex, while Yspeed and acceleration together set the apex height.

Step 3 – Animate

Use requestAnimationFrame (or setTimeout) to update the element’s position.

// Create element
let XStart = 0, YStart = 0, XEnd = 1000, YEnd = 1000;
let Time = T;
let Xspeed = (XEnd - XStart) / Time;
let Yspeed = -YY;
let A = 2 * (YEnd - YStart - Yspeed * Time) / (Time * Time);
let Node = document.createElement('div');
Node.className = 'myNode';
document.body.appendChild(Node);
Node.style.top = YStart + 'px';
Node.style.left = XStart + 'px';

let nowX = XStart;
let nowY = YStart;
let loop = 0;
function move() {
  if (nowY >= YEnd) { Node.remove(); return; }
  nowX += Xspeed;
  nowY += (A * loop + Yspeed);
  Node.style.transform = `translate(${nowX - XStart}px, ${nowY - YStart}px)`;
  loop++;
  requestAnimationFrame(move);
}
move();

To prevent overshooting, clamp the final coordinates with Math.min:

Node.style.transform = `translate(${Math.min(nowX, XEnd) - XStart}px, ${Math.min(nowY, YEnd) - YStart}px)`;

Dynamic Blur Implementation

Dynamic blur (motion blur) creates a visual trail by retaining information from previous frames. It can be simulated by generating several translucent copies of the moving element.

Step 1 – Wrapper Function

let animat = (startPos, endPos) => {
  // parameter setup
  // position update
  nowX += Xspeed;
  nowY += (A * loop + Yspeed);
  requestAnimationFrame(() => {
    Node.style.transform = `translate(${nowX - Xstart}px, ${nowY - Ystart}px)`;
    loop++;
    move();
  });
};

Step 2 – Generate Shadows

For each frame, create a shadow element with reduced opacity (0.1‑0.5) and a slight offset.

let animat = (startPos, endPos, isShadow, ratio) => {
  // ...
  if (isShadow) {
    item.style.transform = `translate(${nowX - Xstart - 0.5 * Xspeed}px, ${nowY - Ystart - 0.5 * (A * loop + Yspeed)}px)`;
    item.style.opacity = 0.5;
  }
};

Step 3 – Multiple Shadows

function createShadow(startPos, endPos, num) {
  for (let i = 0; i < num; i++) {
    animat(startPos, endPos, true, i / (num + 1));
  }
}

By adjusting the number of shadows and their opacity, the motion blur effect becomes more pronounced.

With these steps, the article demonstrates a complete solution for smooth parabolic drop animations with dynamic blur using plain JavaScript.