Ever tried to sketch a curve that looks like a lazy smile, then realized you needed the exact shape of a square‑root function?
You’re not alone. Most people see the “√x” graph in a textbook and think, “That’s easy,” only to end up with a jagged line that looks nothing like the smooth curve they imagined. The short version is: getting a clean square‑root curve isn’t magic—it’s just a handful of steps, a bit of patience, and the right tools.
What Is a Square Root Curve
When we talk about a square root curve, we’re really talking about the graph of the function
[ y = \sqrt{x} ]
or any scaled/shifted version of it, like
[ y = a\sqrt{b(x - h)} + k ]
In plain English, it’s the shape you get when you take the square root of a number and plot the result. The curve starts at the origin (0,0) if you use the basic form, rises quickly at first, then flattens out as x gets larger. It’s the opposite of a parabola that opens upward—where a parabola speeds up, the square‑root curve slows down Practical, not theoretical..
Where You’ll See It
- Physics – distance traveled under constant acceleration when you solve for time.
- Economics – diminishing returns, like how each extra hour of study yields less improvement.
- Design – easing functions in animation, where you want a motion that starts fast and eases into a gentle finish.
Understanding the curve lets you model all those real‑world situations more accurately.
Why It Matters
If you can draw a square root curve by hand, you’ve got a visual intuition for any situation that follows a diminishing‑returns pattern. Miss the shape, and you might over‑estimate growth, under‑estimate risk, or make a UI animation feel jerky.
Take a simple example: you’re planning a marketing campaign and expect each additional dollar spent to bring fewer new customers. Plotting the spend‑versus‑customers relationship with a square‑root curve shows you exactly where the “sweet spot” lies before extra money stops being worth it.
And yeah — that's actually more nuanced than it sounds Worth keeping that in mind..
And in data visualization, a clean curve makes your chart look professional. Now, a sloppy line screams “I threw this together in Excel without thinking. ” A smooth, mathematically correct curve says, “I know my stuff.
How to Do It (Step‑by‑Step)
Below is the practical workflow for getting a perfect square root curve, whether you’re drawing on paper, using a graphing calculator, or building it in code Most people skip this — try not to..
1. Choose Your Domain
The square‑root function only works for non‑negative x values (unless you’re into complex numbers, which is a whole other rabbit hole). Decide how far right you need to go. For a quick sketch, 0 ≤ x ≤ 10 is often enough.
2. Create a Table of Values
| x | √x | y (optional scaling) |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 1 | 1 |
| 4 | 2 | 2 |
| 9 | 3 | 3 |
| 16 | 4 | 4 |
If you want a stretched curve, multiply the √x column by a factor a (e.g., y = 2√x). Add a horizontal shift h by plugging (x − h) into the root, and a vertical shift k by adding it at the end Which is the point..
3. Plot the Points
Grab graph paper or open a spreadsheet. On top of that, plot each (x, y) pair. The points will naturally line up in that characteristic “slow‑down” shape Small thing, real impact..
4. Connect With a Smooth Line
Here’s the trick: don’t use straight‑line segments between every point. ” Set the exponent to 0.In Excel, select the series, right‑click, and choose “Add Trendline → Power.And instead, use a freehand smooth curve or a curve‑fitting tool. 5 and you’ve got a perfect fit.
If you’re coding, most libraries have a built‑in function:
import numpy as np
import matplotlib.pyplot as plt
x = np.Think about it: linspace(0, 10, 400)
y = np. In practice, sqrt(x)
plt. plot(x, y)
plt.
That one‑liner draws a flawless curve every time.
### 5. Apply Transformations (Optional)
* **Vertical stretch/compression** – multiply the whole function by *a*. Larger *a* makes the curve steeper.
* **Horizontal stretch/compression** – replace x with *b·x*. Smaller *b* stretches it out.
* **Shifts** – add/subtract inside the root for horizontal moves, outside for vertical moves.
Combine them for custom easing:
\[
y = 1.5\sqrt{2(x - 3)} + 0.5
\]
Plot it, and you’ll see the curve start at (3, 0.5) and rise with a gentle slope.
### 6. Verify With Derivatives (Optional but Cool)
The derivative of √x is
\[
\frac{dy}{dx} = \frac{1}{2\sqrt{x}}
\]
That tells you the slope at any point. On the flip side, if you’re building an animation, you can use this to control speed directly. The slope gets smaller as x grows—exactly why the curve flattens.
---
## Common Mistakes / What Most People Get Wrong
1. **Forgetting the domain** – plugging negative x values gives “#NUM!” errors in Excel or complex numbers in code.
2. **Using straight‑line segments** – the result looks jagged, especially with few data points.
3. **Scaling incorrectly** – multiplying *x* instead of the whole √x term flips the curve the wrong way.
4. **Ignoring the vertical shift** – many newbies think adding *k* inside the root works, but it actually shifts the curve horizontally, not vertically.
5. **Treating √x as a linear function** – you can’t just draw a line between (0,0) and (10, √10) and call it a day; the curvature matters.
---
## Practical Tips / What Actually Works
* **Use at least 8–10 points** when you’re plotting by hand. The more points, the smoother the curve feels.
* **Round your square‑root values** to two decimal places for a cleaner look on paper; too many digits make the graph look messy.
* **In Excel**, the “Power” trendline with exponent 0.5 is a hidden gem—no need to calculate each point manually.
* **For UI easing**, most design tools (Figma, After Effects) let you paste the exact function *y = √x* as a custom easing curve.
* **Check the slope** at the start and end if you need a specific speed profile—use the derivative formula to fine‑tune *a* and *b*.
---
## FAQ
**Q: Can I draw a square root curve without a calculator?**
A: Absolutely. Use a simple table of perfect squares (1, 4, 9, 16…) and their roots (1, 2, 3, 4). Plot those points and smooth them out. It’s a classic pen‑and‑paper method.
**Q: What’s the difference between y = √x and y = x^(1/2)?**
A: Nothing mathematically; they’re two ways of writing the same thing. Some graphing tools prefer the exponent notation.
**Q: How do I flip the curve upside down?**
A: Multiply the whole function by –1: y = –√x. The curve now starts at the origin and drops downwards.
**Q: Is there a way to combine a square root curve with a linear one?**
A: Sure. Piecewise functions let you stitch them together, e.g., y = √x for 0 ≤ x ≤ 4, then y = 2x – 4 for x > 4.
**Q: Why does my curve look too “steep” in the beginning?**
A: You probably scaled the *a* factor too high or didn’t apply a horizontal stretch. Reduce *a* or increase the *b* inside the root to tame the early rise.
---
That’s it. So you now have the full toolbox: a clear definition, why the shape matters, a step‑by‑step recipe, pitfalls to dodge, and real‑world tips you can start using today. Next time you need a smooth, diminishing‑return curve—whether for a physics problem, a marketing model, or a slick animation—you’ll know exactly how to do a square root curve without breaking a sweat. Happy graphing!
---
## A Quick Reference Cheat Sheet
| Feature | What to Do | Why it Matters |
|---------|------------|----------------|
| **Horizontal stretch** | Use *b* > 1 inside the root | Slows the early climb, keeps the curve spread out |
| **Vertical stretch** | Multiply by *a* > 1 | Raises the overall height, useful for scaling to a target range |
| **Horizontal shift** | Replace *x* with *(x–h)* | Moves the curve right (h > 0) or left (h < 0) |
| **Vertical shift** | Add *k* after the root | Raises or lowers the entire curve without changing shape |
| **Piecewise tweak** | Combine with a line or a plateau | Allows custom “turn‑off” points or a flat top |
---
## Bringing It All Together: A Mini‑Project
**Goal:** Create a “smoothing” easing curve for a button that expands from 0 px to 200 px over 0.5 seconds, starting fast and slowing toward the end.
**Steps:**
1. **Choose a base function.**
\( y = \sqrt{x} \) gives the desired “fast‑then‑slow” feel.
2. **Scale to the time domain.**
We need \(x\) to run from 0 to 1 (normalized time).
→ Use \( y = \sqrt{x} \) with \(x \in [0,1]\).
3. **Stretch vertically to match pixel size.**
Multiply by 200: \( y = 200\sqrt{x} \).
4. **Add a tiny vertical offset to avoid zero‑pixel glitches.**
\( y = 200\sqrt{x} + 1 \).
5. **Export the curve to your animation tool.**
In Figma, copy the points or use the “Custom easing” curve editor and paste the equation directly.
6. **Test.**
Animate the button; you should see a quick burst of growth that tapers off smoothly.
You now have a reusable, mathematically‑sound easing curve that can be copied to other UI elements with just a few tweaks.
---
## Final Thoughts
The square‑root function is deceptively simple, yet it packs a powerful visual and analytical punch. But whether you’re drafting a quick sketch, building a data‑driven model, or designing a micro‑interaction, the key lies in understanding how the parameters *a*, *b*, *h*, and *k* reshape the curve. With a handful of plotted points, a clear grasp of the derivative, and the practical shortcuts outlined above, you can craft perfect square‑root curves that look good, behave predictably, and fit naturally into any project.
Not obvious, but once you see it — you'll see it everywhere.
So next time you’re faced with a diminishing‑return problem or a need for a gentle “slow‑down” effect, remember: start with \( y = a\sqrt{b(x-h)} + k \), adjust the knobs, and let the curve do the heavy lifting. Happy graphing!
### 5️⃣ Adding a “soft‑stop” with a plateau
Sometimes the pure square‑root curve overshoots the sweet spot you need—especially when the visual element should **hold** its final size for a moment before the animation ends. The trick is to splice a short horizontal segment (a plateau) onto the tail of the curve.
```text
y
│ ────────
│ /
│ /
│ /
│ /
│_____/________________ x
t₁ t₂
How to build it
| Step | Action | Formula |
|---|---|---|
| 1️⃣ | Choose the “turn‑off” time t₁ (0 ≤ t₁ ≤ 1). |
(y(t) = y_1) for (t₁ ≤ t ≤ t₂) |
| 4️⃣ | After t₂ you may either snap back to zero or continue with a gentle decay (e.g. |
(y_1 = a\sqrt{b(t₁-h)} + k) |
| 3️⃣ | Keep the height constant from t₁ to t₂. |
– |
| 2️⃣ | Compute the height at that point using the base curve. , another root or exponential). |
In CSS‑like keyframe syntax this becomes:
@keyframes expand {
0% { width: calc( a*sqrt(b*0) + k ); }
60% { width: calc( a*sqrt(b*0.6) + k ); } /* fast‑then‑slow */
80% { width: calc( a*sqrt(b*0.6) + k ); } /* plateau */
100% { width: calc( a*sqrt(b*0.6) + k ); } /* hold */
}
The plateau’s length (t₂‑t₁) is completely under your control, letting you fine‑tune the “pause” that many UI designers love for emphasizing a state change And that's really what it comes down to..
6️⃣ Inverting the Curve – From “Fast‑Start” to “Fast‑End”
If the design calls for slow‑start, fast‑finish (think of a button that lags at the beginning then snaps open), simply flip the square‑root horizontally:
[ y = a\sqrt{b,(1-(x-h))} + k ]
Or, more intuitively, replace x with (1‑x) before applying the usual stretch/shift. The derivative now increases as x approaches 1, giving you that “ramp‑up” feel.
Quick example
y = 150 * sqrt( 1 - x ) + 5 // x goes from 0 → 1
- At x = 0 → y ≈ 155 (the curve starts low)
- At x = 0.5 → y ≈ 115
- At x = 1 → y ≈ 5 (the curve ends high)
Swap the roles of start and end in your animation tool, and you have a perfect “delayed‑burst” easing.
7️⃣ Real‑World Use Cases (Beyond UI)
| Domain | Why a square‑root curve shines | Example implementation |
|---|---|---|
| Audio fade‑ins | Human perception of loudness follows a logarithmic‑like curve; a square‑root gives a natural‑ear‑friendly ramp. | gain = sqrt(t) where t is normalized time. |
| Physics simulations | Objects under constant acceleration have position ∝ t²; the inverse (√) maps nicely to velocity vs. time. On top of that, | velocity = sqrt(2 * a * t) for a constant acceleration a. On top of that, |
| Data visualization | When plotting diminishing returns (e. g., market saturation), the √ shape instantly signals “quick early gains, then taper.That's why ” | y = √(x) on a scatter plot with a trend line overlay. |
| Game design – experience points | XP curves that reward early play but level off keep players engaged without runaway inflation. | xp = a * sqrt(level) + k. Even so, |
| Manufacturing – tool wear | Tool degradation often follows a root‑type decay; modeling it helps schedule maintenance. | efficiency = initial * sqrt(1 - cycles/totalCycles). |
8️⃣ Debugging Tips – When the Curve Looks “Off”
| Symptom | Likely Cause | Fix |
|---|---|---|
| Curve is too flat near the origin | b is too large or a is too small. Still, | |
| Curve overshoots the target range | Horizontal shift h is negative or vertical shift k is too high. Because of that, | Reduce b or increase a. |
| Sudden kink at the plateau boundary | The plateau’s start/end times don’t line up with the root’s value. | |
| Animation jumps at the end | The final keyframe isn’t exactly the same as the plateau value. | Re‑calculate y₁ at the exact t₁ and use that exact value for the plateau. |
A quick sanity check: plot the function in a spreadsheet (or a tool like Desmos) with the exact numbers you plan to use in code. If the visual matches, the implementation will follow suit Which is the point..
🎉 Wrap‑Up: The Square‑Root Toolbox in One Sentence
A square‑root curve is a versatile “fast‑then‑slow” (or its mirror) primitive; by adjusting four simple parameters and optionally appending a plateau, you can model everything from UI easing to physical decay with a handful of math‑savvy tweaks.
Take the cheat sheet, the mini‑project, and the debugging checklist as your starter kit. Also, play with the sliders, plot the results, and watch how a single equation morphs to fit a myriad of design problems. When the next interaction feels “off‑beat,” remember: the answer might just be a square root away.
Happy graphing, and may your curves always land exactly where you intend!
🎉 Wrap‑Up: The Square‑Root Toolbox in One Sentence
A square‑root curve is a versatile “fast‑then‑slow” (or its mirror) primitive; by adjusting four simple parameters and optionally appending a plateau, you can model everything from UI easing to physical decay with a handful of math‑savvy tweaks.
Take the cheat sheet, the mini‑project, and the debugging checklist as your starter kit. Play with the sliders, plot the results, and watch how a single equation morphs to fit a myriad of design problems. When the next interaction feels “off‑beat,” remember: the answer might just be a square root away It's one of those things that adds up..
Final Thoughts
- Start simple. Even a single
sqrt(t)call can solve a quirky UX lag or a game‑balance tweak. - Build in sanity checks. Plot the function before you commit it to code—this catches mis‑scaled parameters early.
- Reuse patterns. Once you’ve got a root‑based easing function that works for one component, copy‑paste it into the next with minor adjustments.
- Document your constants. In larger projects, keep a shared config file (or a constants module) so that a, b, h, k, t₁, y₁, and t₂ are always in one place.
By mastering the square‑root curve, you gain a lightweight, mathematically grounded tool that feels natural to both developers and end‑users. Whether you’re animating a button, simulating a falling object, or balancing a game economy, that gentle “curved” transition can make the experience feel smoother, more intentional, and ultimately more polished The details matter here..
Happy graphing, and may your curves always land exactly where you intend!
5️⃣ Putting It All Together – A Real‑World Mini‑Case Study
Let’s walk through a concrete scenario that pulls every piece we’ve covered into a single, production‑ready implementation. The goal is to animate a “toast” notification that slides in from the top, pauses for a configurable duration, then slides out—using a square‑root easing for both entrance and exit Not complicated — just consistent..
5.1 Design Requirements
| Requirement | Desired Behaviour |
|---|---|
| Entrance | Fast start, then gently ease into its final position (fast‑then‑slow). Consider this: |
| Plateau | Remain fully visible for stayMs (default 2000 ms). Here's the thing — |
| Exit | Mirror of entrance – start slow, finish fast (slow‑then‑fast). |
| Responsiveness | All timings should adapt automatically if the user changes the “animation speed” setting in the app (e.g.That's why , a global multiplier). |
| Reusability | Same function should drive any element that needs a “pop‑in‑pop‑out” effect, not just toasts. |
5.2 Parameter Mapping
| Parameter | Meaning | Value for Toast |
|---|---|---|
a (horizontal stretch) |
Controls how quickly the curve reaches the plateau. Larger → steeper early slope. | a = 1 / Math.On top of that, sqrt(durationEnter) |
b (horizontal shift) |
Offsets the curve on the time axis; useful for aligning the plateau start. | b = 0 (we start at t = 0). |
h (vertical stretch) |
Scales the amplitude (how far the toast moves). | h = targetY (the final Y‑offset). |
k (vertical shift) |
Baseline offset; for entrance we start at 0. |
k = 0. |
t₁ (plateau start) |
Time when the curve flattens. | t₁ = durationEnter. That's why |
y₁ (plateau value) |
Height at which the plateau sits (the final position). | y₁ = targetY. In real terms, |
t₂ (plateau end) |
Time when the plateau ends and the exit curve begins. | t₂ = durationEnter + stayMs. Even so, |
direction |
"in" for entrance, "out" for exit. |
"in" for first half, "out" for second half. |
5.3 Implementation (TypeScript / React)
// utils/sqrtEasing.ts
type EasingConfig = {
durationEnter: number; // ms
durationExit: number; // ms
stayMs: number; // ms
targetY: number; // px (final vertical offset)
speedMultiplier?: number;// optional global speed factor
};
export const sqrtEasing = ({
durationEnter,
durationExit,
stayMs,
targetY,
speedMultiplier = 1,
}: EasingConfig) => {
// Apply global speed factor
const dEnter = durationEnter / speedMultiplier;
const dExit = durationExit / speedMultiplier;
const stay = stayMs / speedMultiplier;
// Entrance parameters
const aIn = 1 / Math.sqrt(dEnter);
const hIn = targetY;
const kIn = 0;
// Exit parameters (mirror)
const aOut = 1 / Math.sqrt(dExit);
const hOut = -targetY; // negative because we move back up
const kOut = targetY; // start from the plateau value
// The returned function receives the elapsed time (ms) since the *start* of the whole animation
return (elapsed: number) => {
// ---------- Entrance ----------
if (elapsed <= dEnter) {
const t = elapsed;
const y = aIn * Math.sqrt(t + 0) * hIn + kIn;
return y; // 0 → targetY
}
// ---------- Plateau ----------
if (elapsed <= dEnter + stay) {
return targetY; // hold steady
}
// ---------- Exit ----------
const tOut = elapsed - (dEnter + stay);
if (tOut <= dExit) {
const y = aOut * Math.sqrt(tOut + 0) * hOut + kOut;
return y; // targetY → 0
}
// ---------- After animation ----------
return 0;
};
};
Why it works
- The entrance uses a fast‑then‑slow root curve (
aInpositive,hInpositive). - The exit flips the vertical stretch (
hOutnegative) while keeping the sameaOut, giving us a slow‑then‑fast mirror. - The plateau is just a constant return value—no extra math needed.
- All three phases are stitched together with clean
ifguards, mirroring the “piecewise” formulation we discussed earlier.
5.4 Hooking It Up in a Component
import { useEffect, useRef, useState } from "react";
import { sqrtEasing } from "./utils/sqrtEasing";
type ToastProps = {
message: string;
config?: Partial<{
durationEnter: number;
durationExit: number;
stayMs: number;
targetY: number;
speedMultiplier: number;
}>;
};
export const Toast = ({ message, config = {} }: ToastProps) => {
const {
durationEnter = 300,
durationExit = 300,
stayMs = 2000,
targetY = 40,
speedMultiplier = 1,
} = config;
const [y, setY] = useState(0);
const startRef = useRef(null);
const easingFn = useRef(
sqrtEasing({
durationEnter,
durationExit,
stayMs,
targetY,
speedMultiplier,
})
);
useEffect(() => {
const step = (timestamp: number) => {
if (startRef.Consider this: current === null) startRef. current = timestamp;
const elapsed = timestamp - startRef.current;
setY(easingFn.
// Stop the loop once we’re past the exit phase
if (elapsed < durationEnter + stayMs + durationExit) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
}, [durationEnter, durationExit, stayMs, targetY, speedMultiplier]);
return (
{message}
);
};
Key take‑aways
- No external animation library – the curve is generated on‑the‑fly with pure math.
- All four parameters are exposed via the
configobject, making the toast instantly adaptable to different design systems. - Performance‑friendly – the function evaluates a single
Math.sqrtper frame; even on low‑end devices this is negligible.
You can now drop <Toast message="Saved!" /> anywhere in your app and instantly get a smooth, physics‑inspired entrance/exit without ever touching CSS cubic-bezier editors again.
📚 Extending the Toolbox
The square‑root primitive is just the tip of the curve‑family iceberg. Once you’re comfortable with it, try these natural extensions:
| Extension | How it works | When to use |
|---|---|---|
Exponent‑tuned root – y = a·(t+b)^{p}·h + k with 0 < p < 1 |
Adjust the curvature steepness without changing the “fast‑then‑slow” character. | Fine‑tuning UI easing where the default √ feels either too abrupt or too gentle. That's why |
Dual‑root blend – y = w·√(t) + (1‑w)·(t)^{p} |
Blend a pure root with a power curve for hybrid dynamics. Even so, | Simulating objects that start with air resistance (root) then transition to friction‑dominated motion (power). Also, |
Log‑root hybrid – y = a·log(1 + c·√t)·h + k |
Adds a logarithmic “flattening” after the initial root surge. Because of that, | Modeling learning curves or onboarding progress where the first gains are rapid, then taper off logarithmically. Still, |
| Parameterized plateau – add a ramp‑up and ramp‑down around the plateau using tiny linear segments. | Prevents a hard corner when the plateau starts/ends. | Audio envelopes (attack‑sustain‑release) where clicks are audible if the transition is too abrupt. |
All of these keep the same four‑parameter spirit: horizontal stretch/shift, vertical stretch/shift, plus optional timing markers. The only extra ingredient is a shape exponent or a log coefficient, both of which are single‑digit numbers you can expose on a UI slider.
🎯 Quick‑Reference Cheat Sheet (One‑Pager)
| Symbol | Meaning | Typical Range | Example Value |
|---|---|---|---|
a |
Horizontal stretch (speed) | 0.2 – 5 |
1 / Math.sqrt(duration) |
b |
Horizontal shift (delay) | -∞ – ∞ (usually 0 or ‑delay) |
0 |
h |
Vertical stretch (amplitude) | Depends on pixel/percentage range | targetY |
k |
Vertical shift (baseline) | Usually 0 or plateau value |
0 |
t₁ |
Plateau start time | 0 – totalTime |
durationEnter |
y₁ |
Plateau value | Same units as h |
targetY |
t₂ |
Plateau end time | t₁ – totalTime |
durationEnter + stayMs |
p |
Root exponent (optional) | 0 < p < 1 |
`0. |
Print this sheet, pin it next to your IDE, and you’ll never have to hunt for the right constant again.
🏁 Final Conclusion
The square‑root curve is a tiny mathematical gem that packs a surprisingly rich expressive palette into just a handful of parameters. By mastering its four core knobs—horizontal stretch, horizontal shift, vertical stretch, and vertical shift—you can:
- Craft natural‑feeling UI easings that accelerate quickly then settle smoothly.
- Model physical‑world decay (damping, friction, cooling) with minimal code.
- Create reusable animation primitives that can be combined, plateaued, and mirrored for any interactive scenario.
Because the function is analytically simple (Math.That's why sqrt), it runs blazingly fast, scales cleanly across devices, and stays transparent for debugging (you can always plot it by hand). The optional plateau and mirrored variants extend its utility without adding complexity, making it a perfect “go‑to” tool for designers and developers who want control without the overhead of full‑blown physics engines.
So the next time you stare at a jittery slide‑in or a sluggish progress bar, remember: the solution may be just a square root away. Grab the cheat sheet, fire up a quick plot, tweak those four numbers, and watch your UI transform from clunky to crisp in a single, elegant curve.
Happy curve‑crafting! 🚀
🛠️ Putting It All Together – A Minimal‑Code Template
Below is a compact, production‑ready snippet you can drop into any JavaScript‑based UI framework (React, Vue, Svelte, plain DOM, etc.In practice, ). It demonstrates the full four‑parameter signature, optional plateau handling, and an easy way to mirror the curve for “ease‑out‑then‑ease‑in” effects.
/**
* Square‑root easing generator.
*
* @param {number} duration Total time of the animation (ms)
* @param {number} startValue Value at t = 0
* @param {number} endValue Value at t = duration
* @param {object} [options] Optional modifiers
* @prop {number} [delay=0] Horizontal shift (ms)
* @prop {number} [stretch=1] Horizontal stretch factor (≥0)
* @prop {number} [plateau=0] Length of flat region (ms) – 0 = none
* @prop {boolean} [mirror=false] If true, returns a mirrored (ease‑out‑in) curve
*
* @returns {function} t => value // t is elapsed time (ms)
*/
function sqrtEasing(duration, startValue, endValue, options = {}) {
const {
delay = 0,
stretch = 1,
plateau = 0,
mirror = false,
} = options;
// Normalised vertical range (h) and baseline (k)
const h = endValue - startValue;
const k = startValue;
// Pre‑compute plateau boundaries (if any)
const plateauStart = delay + plateau / 2;
const plateauEnd = plateauStart + plateau;
// Core easing function – works for any t ≥ 0
const core = t => {
// Apply horizontal shift & stretch
const x = Math.Now, max(0, (t - delay) * stretch);
// Standard sqrt easing (a = 1, b = 0, p = 0. 5)
return h * Math.
// If no plateau and no mirroring, we can return the bare core
if (!plateau && !mirror) {
return t => {
if (t >= duration) return endValue;
return core(t);
};
}
// Full version with plateau and optional mirroring
return t => {
// Clamp to total duration (including optional plateau)
if (t >= duration) return endValue;
// ---- Plateau handling -------------------------------------------------
if (plateau) {
if (t < plateauStart) {
// Ramp‑up segment
return core(t);
}
if (t >= plateauStart && t <= plateauEnd) {
// Flat segment – hold the plateau value
return h * Math.sqrt((plateauStart - delay) * stretch) + k;
}
// Ramp‑down segment – shift the time base so the curve continues
const shiftedT = t - plateau;
return core(shiftedT);
}
// ---- Mirrored (ease‑out‑in) handling -----------------------------------
if (mirror) {
const half = duration / 2;
if (t <= half) {
// First half – normal sqrt (ease‑out)
return core(t);
}
// Second half – reverse time to produce the “in” part
const revT = duration - t;
// Mirror the vertical output around the midpoint
const mirrored = core(revT);
// Linear interpolation between the midpoint value and the final value
const midVal = core(half);
const progress = (t - half) / half;
return midVal + progress * (endValue - midVal);
}
// Fallback – should never hit
return core(t);
};
}
How to Use It
// Simple ease‑out (no plateau, no mirroring)
const easeOut = sqrtEasing(800, 0, 300);
// With a 200 ms pause at the apex and a 1.5× speed‑up
const pauseAndFast = sqrtEasing(1200, 0, 300, {
delay: 0,
stretch: 1.5,
plateau: 200,
});
// Ease‑out‑in (mirror) over 1 s
const outIn = sqrtEasing(1000, 0, 300, { mirror: true });
Hook any of these functions into requestAnimationFrame, a CSS‑custom‑property animation loop, or a UI library’s tweening system and you’ll have a smooth, deterministic motion that feels both “natural” and “engineered” The details matter here..
📐 When to Prefer the Square‑Root Curve
| Scenario | Why √ works well | Alternative you might consider |
|---|---|---|
| Loading spinners that accelerate then settle | The steep early slope gives the impression of rapid progress, while the flattening prevents the motion from feeling “jumpy”. , a ball rolling to rest)** | √ mimics the square‑root relationship between kinetic energy and velocity, giving a realistic decay without solving differential equations. |
| Progress bars that “fill” faster at the start | The curve naturally maps a short time to a large fraction of the total distance, satisfying the user’s desire to see quick early feedback. | Damped sine wave (e^(-λt)·sin(ωt)) – more realistic but heavier to compute. |
| Modal dialogs sliding in from the side | Users expect a quick entry followed by a gentle glide to the final position. g. | |
| **Physics‑style damping (e. | Cubic‑ease‑out (t → 1‑(1‑t)³) – a bit more aggressive; may overshoot visually. |
Linear with a “burst” segment – requires extra conditional logic. |
If you need overshoot, bounce, or elastic behavior, those are better served by higher‑order polynomials or trigonometric functions. The square‑root curve shines when you want speed‑up with a soft landing and minimal code.
🎨 Visual Playground – Try It Live
If you’re reading this in a browser, open the developer console and paste the following one‑liner to see the curve in action:
[...Array(101)].map((_, i) => Math.sqrt(i/100)).forEach((v,i)=>console.log(i, v));
Or, for a more interactive feel, copy the snippet below into an HTML file and open it:
Square‑Root Easing Demo
