Tired of jarring steps at your breakpoints? Enter the desired element size at two given screen resolutions to automatically calculate a CSS value (pixels + viewport units) that will smoothly transition between those two sizes. Works for width or height.

If you're trying to describe a smooth arc between two points, this formula for a parabola might help you out. Just write a helper function to implement it, and replace height with either a variable or a fixed height. In my case, I wrote a helper that takes a value for x between 0...1 and returns the height of a point on the parabola, which can be added to the y-coordinate of a Vector3 to move it up the appropriate amount. It also works well with Mathf.Lerp to smoothly move an object along a parabolic arc.

Formula: y = -( 2 * sqrt(height)x - sqrt(height))² + height

Helper Function (C#):
float getPointOnParabola(float progress, float magnitude)
{
 float ret = -Mathf.Pow(((2 * Mathf.Sqrt(magnitude) * progress) - Mathf.Sqrt(magnitude)), 2) + magnitude;
 return ret;
}

Demo Video: