← Back to Library•Animation & Easing

easeInOut

ease-in-out function for smooth acceleration and deceleration.

110 total functionsUpdated: Invalid Date

easeInOut

ease-in-out function for smooth acceleration and deceleration.

Parameters

NameTypeDescription
tf32Input parameter (0-1).
powerf32Easing power (higher = more pronounced curve).

Returns

f32value.

WGSL Code

fn easeInOut(t: f32, power: f32) -> f32 {
  let tt = clamp(t, 0.0, 1.0);
  if (tt < 0.5) {
    return 0.5 * pow(2.0 * tt, power);
  } else {
    return 0.5 + 0.5 * (1.0 - pow(2.0 * (1.0 - tt), power));
  }
}

Other functions in Animation & Easing

bezierCubic

a cubic Bezier curve and returns both value and derivative.

easeIn

ease-in function for smooth acceleration.

easeOut

ease-out function for smooth deceleration.

elasticIn

ease-in function with oscillating motion.

elasticOut

ease-out function with oscillating motion.

backIn

ease-in function that overshoots before settling.

backOut

ease-out function that overshoots before settling.

springPhysics

spring animation with configurable parameters.

Browse Functions

All FunctionsAnimation & Easing Category

About wgsl-fns

A JavaScript library providing WGSL utility functions as strings for WebGPU shader development. Includes mathematical utilities, noise generation, signed distance fields, and color manipulation functions.

Install:npm install wgsl-fns
Import:import { easeInOut, getFns } from 'wgsl-fns'
Usage:getFns(['easeInOut'])