Struggling to create a seamless transition with a UIGradient

Help and Feedback Scripting Support
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!

2. What is the issue? Include screenshots / videos if possible!

It stutters and is not smooth

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

I tried using renderstepped and ended up switching over to tweenservice because I was afraid maybe it was due the offset overlapping with each other when firing the incrementColorKeypoints function but that is not the case, it is probably to do with my math or something I honestly have no idea why this is not working.
After that, you should include more details if you have any. Try to make your topic as descriptive as possible, so that it’s easier for people to help you!

--!strict
local TweenService = game:GetService("TweenService")
assert(script.Parent, "Parent not found")
local uiGradient = script.Parent:FindFirstChildOfClass("UIGradient")
assert(uiGradient, "UIGradient not found")

local SPEED = 1.2

local ORIGINAL_COUNT = #uiGradient.Color.Keypoints
local INCREMENT_BY = 1 / ORIGINAL_COUNT

uiGradient.Offset = Vector2.new(-INCREMENT_BY, 0)

local function incrementColorKeypoints()
	local currentKeypoints = uiGradient.Color.Keypoints
	local newKeypoints = {}
	-- Increment times for all original keypoints
	local lastKeypoint = currentKeypoints[#currentKeypoints]
	table.remove(currentKeypoints, #currentKeypoints)
	table.insert(currentKeypoints, 1, ColorSequenceKeypoint.new(0, lastKeypoint.Value))
	for i, keypoint in ipairs(currentKeypoints) do
		local newTime
		if i == 1 then
			newTime = 0
		elseif i == #currentKeypoints then
			newTime = 1
		else
			newTime = (i - 1) / (#currentKeypoints - 1)
		end
		table.insert(newKeypoints, ColorSequenceKeypoint.new(newTime, keypoint.Value))
	end

	-- Sort original keypoints
	table.sort(newKeypoints, function(a, b)
		return a.Time < b.Time
	end)

	-- Update the gradient
	uiGradient.Color = ColorSequence.new(newKeypoints)
end

local tween = TweenService:Create(
	uiGradient,
	TweenInfo.new(SPEED, Enum.EasingStyle.Linear),
	{ Offset = Vector2.new(INCREMENT_BY, 0) }
)

tween.Completed:Connect(function()
	uiGradient.Offset = Vector2.new(-INCREMENT_BY, 0)
	tween:Play()
	incrementColorKeypoints()
end)

tween:Play()

Please do not ask people to write entire scripts or design entire systems for you. If you can’t answer the three questions above, you should probably pick a different category.

#2

probably write your own loop with heartbeat, idk whether or not uigradients have some quirk that messes with tweens

pseudo;

speedMultiplier = 10
xOffset = 0 -- float 0-1 (idk the uigradient properties)
RunService.Heartbeat:Connect(function(deltaTime)
xOffset = (xOffset + deltaTime*speedMultiplier)%1
UIGradient.Offset = Vector2.new(xOffset, 0) -- UDim ?
end)
1 Like