Rainbow UI Gradient Wave Effect Issue

local Gradient = script.Parent

while true do
	
	for i = -1,1,0.02 do
		
		Gradient.Offset = Vector2.new(i,0)
		
		wait(0.05)
		
	end
	
	Gradient.Offset = Vector2.new(-1,0)
	
	wait(0.2)
	
	for i = -1,1,0.02 do

		Gradient.Offset = Vector2.new(i,0)

		wait(0.05)

	end

	Gradient.Offset = Vector2.new(-1,0)
	
	wait(0.2)
	
end
1 Like

Have you tried using tweenservice? It is usually the best way to move stuff around.

However, the issue you got there is a bit more complicated than that. Since you have a start and an end color it will stay the same color before/after the gradient. To fix this you can make your gradient have “two” rainbows instead of one. If you move it one rainbow length (halfway) and then start it back at the beginning it should be a seamless loop, as the start and midpoint should look the same.

So i need one ui gradient to be -1,0 offset and another 0,0 and 1,0?

I haven’t used UI gradient in this way before, but I’ll try to explain what I mean.


Lets say the above is how your gradient looks. As you can see, if you start at S and look toward C, it is the same as starting at C and looking at E. If you make the gradient move from S to C you can then, as soon as you reach C (since C ~= S), reset the offset back to S and begin again.

can you make that pattern please? i have this pattern but its incorrect
image

That pattern is almost right, not quite though. Just set the first, last and middle (0.5) to red. Move everything else you have inside the span from 0->0.5 and 0.5->1. To find out new position, just /2 and you have its new location on the first half (0->0.5). On the second half, add 0.5 to all of the first half

The middle gets messed up if i do red there
image

Yes, you have to move all of them. The color you had at position .5 should now be at (0.5/2) 0.25, the one at .8 should be at .4 and so on. You previously had 1 rainbow on that entire gradient, but you should have two of them. Please refer to the previously sent image.

This is what i got

image

Not quite there mate, I’m not sure what you want me to help you with. If you just do the same thing as you did before, but make it finish at .5 instead of 1 you are good to go. Let me know once you have a gradient resembling the image I’ve provided if it doesn’t work, and I’ll be happy to help.

Are you able to create a model of the ui gradient?

Having the gradient end and restart at 0.5 actually won’t work; you’d still face the same problem. I recommend creating two UIGradients, one with an offset of -1 and the other with 0. Then you tween the first one to 0, and the second one to 1. After the tween completes, the second one moves to -1 and becomes the first one. Hope this helps!

Would you though? If the letter furthest to the left has the value of S and so on towards the right, then when the letter furthest to the left reaches color C then you can swap it back to S and it would be seamless.

Also,

no, I won’t be able to. The image I sent is just a paint image from some CTRL+C, CTRL+V.

You can look at this link here if you want to try another method without an image. I used a similar approach to DesertedVoltron’s post.

The issue is that instead of getting your desired effect, you’d just see a UI element with two rainbows that face the same problem (the whole gradient is displayed at once, instead of just one of the rainbows). I think what you want is to have one rainbow from 0 to 1, and another from 1 to 2 (which doesn’t work).