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
inOutSine(p * 2)	click to see the animation with this easing	0	0.095	0.345	0.655	0.905	1	0.905	0.655	0.345	0.095	0
abs(easeInCubic(p * 2 - 1))	click to see the animation with this easing	1	0.512	0.216	0.064	0.008	0	0.008	0.064	0.216	0.512	1
easeInQuadCyc	click to see the animation with this easing	0	0.04	0.16	0.36	0.64	1	0.96	0.84	0.64	0.36	0
easeInCubicCyc	click to see the animation with this easing	0	0.008	0.064	0.216	0.512	1	0.992	0.936	0.784	0.488	0
inOutQuadCyc	click to see the animation with this easing	0	0.08	0.32	0.68	0.92	1	0.92	0.68	0.32	0.08	0
sin(p * PI)	click to see the animation with this easing	0	0.309	0.588	0.809	0.951	1	0.951	0.809	0.588	0.309	0
abs(cos(p * PI))	click to see the animation with this easing	1	0.951	0.809	0.588	0.309	0	0.309	0.588	0.809	0.951	1
inOutSine(sin(p * PI))	click to see the animation with this easing	0	0.218	0.636	0.913	0.994	1	0.994	0.913	0.636	0.218	0
easeInCubic(sin(p * PI))	click to see the animation with this easing	0	0.03	0.203	0.53	0.86	1	0.86	0.53	0.203	0.03	0
easeInCubic(cos(p * PI))	click to see the animation with this easing	1	0.86	0.53	0.203	0.03	0	-0.03	-0.203	-0.53	-0.86	-1

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

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

← all notes