Any way on how to make this UI animation?

[StarryShrank]

So I am amazed with the APPLE UI animation. When the user scrolls an animation will go on together. This is the example: AirPods (3rd generation) - Apple (AU)

I am wondering on how to make this kind of UI animation… If you gets have any idea please tell me!

[WoTrox]

You can detect mouse scrolling with UserInputService

UserInputService

Then you can make a keyframe animation of the UI and when the player scrolls, you move through those keyframes. You can create a smooth transition between keyframes using linear interpolation.

For example, let’s say you want a UI to change colour from RGB(255, 0, 0) to RGB(0, 0, 0) and you want this animation to “take 10 scrolls” to complete. You can do this:

local KeyframePos = 0;
uis.InputChanged:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseWheel then
		if input.Position.Z > 0 then -- Check if the player scrolled up or down, >0 is up, <0 s down
			if KeyframePos < 10 then -- Check if the animation already is at the end
				KeyframePos += 1 -- If not at the end, go forward 1 
			end
		else
			if KeyframePos > 0 then -- Check if the animation already is at the beginning
				KeyframePos -= 1 -- If not at the end, go back 1 
			end
		end

		-- Now set the UI colour
		UI.BackgroundColor = Color3.new(KeyframePos/10, 0, 0) 
	end
end)

I haven’t tested it but it should work.
Hope this helps