Does anyone know the Formulas for Elastic Easing?

Help and Feedback Scripting Support
, ,
#1

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:

ElasticIn
ElasticIn1233×542 32.2 KB

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:

ElasticOut
ElasticOut1240×545 31.3 KB

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:

ElasticInOut
ElasticInOut1244×547 33.9 KB

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).

2 Likes