Weird UIGradient animation

[silk hedge]

Hello, as you can see in the video, my uigradient doesn’t run constantly, there are fast and slow back and forth movements. Why ? :

local RunService = game:GetService("RunService")
local Test = script.Parent.Frame4.Frame.UIStroke.UIGradient

local gradients = {
    {gradient = script.Parent.Frame1.TextBox1.UIStroke.UIGradient, speed = 90},
    {gradient = script.Parent.Frame2.TextBox2.UIStroke.UIGradient, speed = 90},
    {gradient = script.Parent.Frame1.ScrollingFrame.UIStroke.UIGradient, speed = 90},
    {gradient = script.Parent.Frame2.ScrollingFrame.UIStroke.UIGradient, speed = 90},
    {gradient = script.Parent.Frame4.Frame.UIStroke.UIGradient, speed = 90},
    {gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton1.UIStroke.UIGradient, speed = 180},
    {gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton2.UIStroke.UIGradient, speed = 180},
    {gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton3.UIStroke.UIGradient, speed = 180},
}

for _, g in ipairs(gradients) do
    g.gradient.Rotation = 0
end

RunService.RenderStepped:Connect(function(dt)
    for _, g in ipairs(gradients) do
        g.gradient.Rotation = (g.gradient.Rotation + g.speed * dt) % 360
    end
end)

[tawny maple]

** You are now Level 6! **

[covert phoenix]

Works fine for me:
It all depends on the clients fps though I think though

[vivid bloom]

i think it's the image being rotated not compensating for the length of the ui

[covert phoenix]

maybe

ur right

i tried to do it on a uistroke and its buggy

[silk hedge]

So on UIStroke it's bugged ?

[covert phoenix]

eh just glitchy cus of the speed

[tawny maple]

** You are now Level 1! **

[covert phoenix]

i think

raise speed up to like 120 and its a bit less noticeable

still stops but still

240 is also pretty good

[keen crane]

w rich amiri

[silk hedge]

It's maybe the size but yeah idk .?

[novel sail]

.RenderStepped fires every frame (depends on users fps) if that helps

[silk hedge]

ik, i test with tween and other stuff same issue :

local function test()
    local test = TweenService:Create(Test,
        TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -180),
        {Rotation = 360})
    
    test:Play()
    test.Completed:Connect(function()
        Test.Rotation = -180
        test()
    end)
end

function rotateGradient()
    wait(0.05)
    Test.Rotation = Test.Rotation + 1
end

repeat rotateGradient() until 1 == 2

[covert phoenix]

first of all use task.wait(0.05) if you do it like this lol

[tawny maple]

** You are now Level 2! **

[covert phoenix]

don't use wait() use task.wait()

its more accurate

[silk hedge]

I know dw, it's was just a quick test in case render was the issue

[novel sail]

nah its cause of the size

[silk hedge]

Then im cooked

[novel sail]

y see at the start how the purple gets like rlly wide

[silk hedge]

Yep exactly that weird thing

[novel sail]

ye

[silk hedge]

Well I guess have to wait until it's fixed

[novel sail]

Or figure out a diffrent solution

[covert phoenix]

I don't think that's something that would get fixed

[silk hedge]

I can't change the size because I want exactly that one and changing the offset of the uigradient makes it even weirder then

[covert phoenix]

Honestly I would just increase the speed to make it less noticeable 🤷

[silk hedge]

I tried too but the visual is worse xD

Dw I just gonna wait and hope

[covert phoenix]

lol

[novel sail]

local gradient = script.Parent.Frame.UIGradient
local runService = game:GetService("RunService")

local colors = {
    Color3.fromRGB(255, 0, 0),
    Color3.fromRGB(0, 255, 0),
    Color3.fromRGB(0, 0, 255)
}

local t = 0
runService.RenderStepped:Connect(function(dt)
    t += dt
    local shift = (math.sin(t) + 1) / 2
    gradient.Color = ColorSequence.new{
        ColorSequenceKeypoint.new(0, colors[1]:Lerp(colors[2], shift)),
        ColorSequenceKeypoint.new(1, colors[3]:Lerp(colors[1], shift))
    }
end)

chatgpt gave me this, it doesn't fix anything but looks pretty cool 😭

[silk hedge]

hmm

[vivid bloom]

try increasing the y scale to x

so if x is 0.9, y is 9

[silk hedge]

Yes it's work with same Y / X but ye in my gui can't change the Y size

[vivid bloom]

i see

[silk hedge]

It's just roblox who can't take a Small Y Size

Here my script is better retouched, if anyone finds a solution here it is :

local RunService = game:GetService("RunService")

local UIGradients = {
    {Gradient = script.Parent.Frame1.TextBox1.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame1.ScrollingFrame.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame1.ScrollingFrame.ImageButton.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.TextBox2.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.ScrollingFrame.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.ScrollingFrame.ImageButton.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.Frame.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton1.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton2.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton3.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton4.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame2.Frame.ScrollingFrame.ImageButton5.UIStroke.UIGradient},
    {Gradient = script.Parent.Frame4.Frame.UIStroke.UIGradient},
}

RunService.RenderStepped:Connect(function()
    for _, UIGradient in ipairs(UIGradients) do
        UIGradient.Gradient.Rotation += 1
    end
end)

[vivid bloom]

i don't think there is a solution unless you use math to slow down on the rotation given the size difference

[silk hedge]

Ye sadly

[vivid bloom]

you need to consult a math genius

[silk hedge]

[novel sail]

the problem is not the speed but how roblox assigns the rotated GradientUI

[vivid bloom]

or if clips descendants worked on rotated images he could rotate a imagelabel instead of uigradient

[novel sail]

he'd had to autoscale the width, which would cause the same bug because the middle color is just more dominant cause it gets streched

[novel sail]

like we saw here

[vivid bloom]

true

or make imagelabels with a solid color and path find on the edges

[novel sail]

yeah I don't think we'll solve ts 😭

[vivid bloom]

and clips descendants will work cause it's not rotated

[novel sail]

I think a solution is to make the middle part thinner you can do that by adding 2 more of the same color but closer together inside the UIGradient (explaination is ass) but getting this in the right time + the right width is like hell, also idk if you can add more colors to UIGradient in runtime

[steel tapir]

It's not a glitch, it's an illusion

If you remove the black bg, it will look better

[silk hedge]

Its on a uistroke not on the frame

I alr try that too that why

[steel tapir]

Oh I mean that's the intended way

[silk hedge]

Yes the ui gradient is not on the frame

[novel sail]

I think its because the UIGradient gets streched or smth look at this @steel tapir

[silk hedge]

Found a solution @novel sail @steel tapir @vivid bloom @covert phoenix ty for the help

[silk hedge]

nvm don't work xD

[novel sail]

I don't want to know what happend between these 2 hours

[silk hedge]

LMAO

[novel sail]

wish me luck trying to read these nodes out