Does anyone know the Formulas for Elastic Easing?

I use a native implementation of TweenService:GetValue to do animation easing because it is extremely fast compared to using the engine (about 7.5x faster).

However, I noticed a discrepancy between my elastic functions and TweenService’s. The curves are the same, but there are slight deviations from the “magic numbers”. Mine uses the math.pi constant while Roblox’s seems to use some estimate.

ElasticIn

Graph:

From: Easing Functions Cheat Sheet

Magic Number: (2 * math.pi) / 3 or 2.0943951023931953

Function:

local function ElasticIn(Value: number): number
	if Value == 0 then
		return 0
	end
	
	if Value == 1 then
		return 1
	end
	
	return -2 ^ (-10 + 10 * Value) * math.sin((-10.75 + Value * 10) * 2.0943951023931953)
end

ElasticOut

Graph:

From: Easing Functions Cheat Sheet

Magic Number: (2 * math.pi) / 3 or 2.0943951023931953

Function:

local function ElasticOut(Value: number): number
	if Value == 0 then
		return 0
	end
	
	if Value == 1 then
		return 1
	end
	
	return 1 + 2 ^ (-10 * Value) * math.sin((-0.75 + 10 * Value) * 2.0943951023931953)
end

ElasticInOut

Graph:

From: Easing Functions Cheat Sheet

Magic Number: (2 * math.pi) / 4.5 or 1.3962634015954636

Function:

local function ElasticInOut(Value: number): number
	if Value == 0 then
		return 0
	end
	
	if Value == 1 then
		return 1
	end
	
	if Value < 0.5 then
		return -2 ^ (-10 + 20 * Value) * math.sin((- 11.125 + 20 * Value) * 1.3962634015954636) * 0.5
	end
	
	return 1 + 2 ^ (10 + -20 * Value) * math.sin((-11.125 + 20 * Value) * 1.3962634015954636) * 0.5
end

You may need to zoom in on the graphs to see the divergence. I have tried other magic numbers (Archimedes constant, rounded estimates).

1 Like