easing functions for cyclical animations

A collection of functions and demos

Tags: #animation #generative art

Last updated: Oct 20, 2022

I often want something like an easing function but that moves back and forth between the same number instead of just from 0 to 1.

Sine and cosine functions obviously do that, but those have a specific feel to them and sometimes I want the motion to feel like something different!

Here's a collection of functions to use in cyclical animations. Click each row of the table to see a demo below.

progress		0	0.1	0.2	0.3	0.4	0.5	0.6	0.7	0.8	0.9	1

function easeInOutSine(x) {
	return - ( Math.cos( Math.PI * x ) - 1 ) / 2
}

let p = animLoop.progress
let val = easeInOutSine(p * 2)

function easeInCubic(x) {
	return x * x * x
}

let p = animLoop.progress
let val = Math.abs(easeInCubic(p * 2 - 1))

function easeInQuad(x) {
	return x * x
}

function easeInQuadCyc(p) {
	if (p < 0.5) {
		return easeInQuad(p * 2)
	} else {
		return 1 - easeInQuad((p - 0.5) * 2)
	}
}

let p = animLoop.progress
let val = easeInQuadCyc(p)

function easeInCubic(x) {
	return x * x * x
}

function easeInCubicCyc(p) {
	if (p < 0.5) {
		return easeInCubic(p * 2)
	} else {
		return 1 - easeInCubic((p - 0.5) * 2)
	}
}
let p = animLoop.progress
let val = easeInCubicCyc(p)

let p = animLoop.progress
let val = Math.sin(p * Math.PI)

function inOutQuad(x) {
	return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
}

function inOutQuadCyc(x) {
	return x < 0.5 ? inOutQuad(x * 2) : 1 - inOutQuad((x - 0.5) * 2)
}
let p = animLoop.progress
let val = inOutQuadCyc(p)

let p = animLoop.progress
let val = Math.abs(Math.cos(p * Math.PI))

function easeInOutSine(x) {
	return - ( Math.cos( Math.PI * x ) - 1 ) / 2
}

let p = animLoop.progress
let val = easeInOutSine(Math.sin(p * Math.PI))

function easeInCubic(x) {
	return x * x * x
}

let p = animLoop.progress
let val = easeInCubic(Math.sin(p * Math.PI))

← all notes