Assorted common math functions & utilities for TypeScript/JavaScript applications
—
Pre-built easing functions for animations and smooth transitions. Includes polynomial, exponential, elastic, and bounce easing curves.
Higher-order functions that create customized easing functions.
/**
* Creates exponential ease-in function with exponent k
* @param k - Exponent value (higher = steeper curve)
* @returns Ease-in function
*/
function defEaseInExp(k: number): (t: number) => number;
/**
* Creates exponential ease-out function with exponent k
* @param k - Exponent value (higher = steeper curve)
* @returns Ease-out function
*/
function defEaseOutExp(k: number): (t: number) => number;
/**
* Creates exponential ease-in-out function with exponent k
* @param k - Exponent value (higher = steeper curve)
* @returns Ease-in-out function
*/
function defEaseInOutExp(k: number): (t: number) => number;Usage Examples:
import { defEaseInExp, defEaseOutExp } from "@thi.ng/math/easing";
// Create custom exponential easing functions
const strongEaseIn = defEaseInExp(4);
const gentleEaseOut = defEaseOutExp(2);
// Use in animations
const value = strongEaseIn(0.5); // Strong acceleration
const softValue = gentleEaseOut(0.7); // Gentle deceleration/**
* Linear interpolation (no easing)
* @param t - Time parameter [0,1]
* @returns Linear value
*/
function easeLinear(t: number): number;Polynomial easing functions with different degrees for varying curve steepness.
/** Quadratic ease-in: t² */
function easeIn2(t: number): number;
/** Quadratic ease-out: 1-(1-t)² */
function easeOut2(t: number): number;
/** Quadratic ease-in-out: combination of ease-in and ease-out */
function easeInOut2(t: number): number;
/** Cubic ease-in: t³ */
function easeIn3(t: number): number;
/** Cubic ease-out: 1-(1-t)³ */
function easeOut3(t: number): number;
/** Cubic ease-in-out: combination of ease-in and ease-out */
function easeInOut3(t: number): number;
/** Quartic ease-in: t⁴ */
function easeIn4(t: number): number;
/** Quartic ease-out: 1-(1-t)⁴ */
function easeOut4(t: number): number;
/** Quartic ease-in-out: combination of ease-in and ease-out */
function easeInOut4(t: number): number;
/** Quintic ease-in: t⁵ */
function easeIn5(t: number): number;
/** Quintic ease-out: 1-(1-t)⁵ */
function easeOut5(t: number): number;
/** Quintic ease-in-out: combination of ease-in and ease-out */
function easeInOut5(t: number): number;Usage Examples:
import { easeIn3, easeOut3, easeInOut3 } from "@thi.ng/math/easing";
// Cubic easing variations
const accelerating = easeIn3(0.3); // Slow start, fast end
const decelerating = easeOut3(0.7); // Fast start, slow end
const smooth = easeInOut3(0.5); // Smooth acceleration/decelerationBack easing functions that overshoot the target before settling.
/** Back ease-in: overshoots backwards before forward motion */
function easeInBack(t: number): number;
/** Back ease-out: overshoots forward past target then returns */
function easeOutBack(t: number): number;
/** Back ease-in-out: combination of back ease-in and ease-out */
function easeInOutBack(t: number): number;Bounce easing functions that simulate bouncing ball physics.
/** Bounce ease-in: bouncing effect at start */
function easeInBounce(t: number): number;
/** Bounce ease-out: bouncing effect at end */
function easeOutBounce(t: number): number;
/** Bounce ease-in-out: bouncing at both start and end */
function easeInOutBounce(t: number): number;Circular easing based on quarter-circle curves.
/** Circular ease-in: quarter circle curve */
function easeInCirc(t: number): number;
/** Circular ease-out: inverted quarter circle */
function easeOutCirc(t: number): number;
/** Circular ease-in-out: combination of circular curves */
function easeInOutCirc(t: number): number;Elastic easing functions that simulate elastic/spring behavior.
/** Elastic ease-in: elastic oscillation at start */
function easeInElastic(t: number): number;
/** Elastic ease-out: elastic oscillation at end */
function easeOutElastic(t: number): number;
/** Elastic ease-in-out: elastic oscillation at both ends */
function easeInOutElastic(t: number): number;Exponential easing functions using base-2 exponentials.
/** Exponential ease-in (base 2): 2^(10*(t-1)) */
function easeInExp2(t: number): number;
/** Exponential ease-out (base 2): -(2^(-10*t)) + 1 */
function easeOutExp2(t: number): number;
/** Exponential ease-in-out (base 2): combination of exponential curves */
function easeInOutExp2(t: number): number;Easing functions based on sine wave curves.
/** Sinusoidal ease-in: sine curve acceleration */
function easeInSine(t: number): number;
/** Sinusoidal ease-out: sine curve deceleration */
function easeOutSine(t: number): number;
/** Sinusoidal ease-in-out: smooth sine curve transition */
function easeInOutSine(t: number): number;Usage Examples:
import {
easeOutBounce, easeInBack, easeInElastic,
easeInOutCirc, easeOutExp2, easeInOutSine
} from "@thi.ng/math/easing";
// Different easing effects for animations
const bounceEnd = easeOutBounce(0.8); // Bouncy landing
const overshoot = easeInBack(0.6); // Pull back before moving
const springy = easeInElastic(0.4); // Elastic oscillation
const smooth = easeInOutCirc(0.5); // Smooth circular transition
const explosive = easeOutExp2(0.3); // Fast exponential movement
const gentle = easeInOutSine(0.7); // Gentle sinusoidal curve
// Use in animation frameworks
function animate(startValue: number, endValue: number, progress: number) {
const easedProgress = easeOutBounce(progress);
return startValue + (endValue - startValue) * easedProgress;
}import { easeInOut3, easeOutBounce, easeInBack } from "@thi.ng/math/easing";
import { mix } from "@thi.ng/math/mix";
// Simple property animation
function animateProperty(
start: number,
end: number,
duration: number,
easingFn: (t: number) => number
) {
return (time: number) => {
const progress = Math.min(time / duration, 1);
const easedProgress = easingFn(progress);
return mix(start, end, easedProgress);
};
}
// Usage examples
const smoothMove = animateProperty(0, 100, 1000, easeInOut3);
const bouncyScale = animateProperty(1, 2, 800, easeOutBounce);
const snapRotation = animateProperty(0, 360, 600, easeInBack);
// At animation time t
const position = smoothMove(500); // At 500ms
const scale = bouncyScale(400); // At 400ms
const rotation = snapRotation(300); // At 300msInstall with Tessl CLI
npx tessl i tessl/npm-thi-ng--math