# easing functions for cyclical animations

A collection of functions and demos
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.

``function easeInOutSine(x) {	return - ( Math.cos( Math.PI * x ) - 1 ) / 2}let p = animLoop.progresslet val = easeInOutSine(p * 2)``
``function easeInCubic(x) {	return x * x * x}let p = animLoop.progresslet 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.progresslet 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.progresslet val = easeInCubicCyc(p)``
``let p = animLoop.progresslet 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.progresslet val = inOutQuadCyc(p)``
``let p = animLoop.progresslet val = Math.abs(Math.cos(p * Math.PI))``
``function easeInOutSine(x) {	return - ( Math.cos( Math.PI * x ) - 1 ) / 2}let p = animLoop.progresslet val = easeInOutSine(Math.sin(p * Math.PI))``
``function easeInCubic(x) {	return x * x * x}let p = animLoop.progresslet val = easeInCubic(Math.sin(p * Math.PI))``