Hello, my name is Anthony. I’ll be providing you with information on how to animate UIGradients.
.
Setting up the UI
To get things started, let’s create a ScreenGUI.
In the ScreenGUI, insert the object that will have the gradient (can be a Frame, Image, and a Button).
In this case, I’m gonna use a button.
(“OrangeStripe” is not needed, I’m just using it for extra decoration.)
Then, insert an UIGradient and LocalScript inside the object.
TextLabels are optional, but, I’m gonna use it anyway.
You can use any colour, just make sure the bright part is in the middle.
Now that we are set up, let’s make it work.
.
Scripting the animation
--//VARIABLES:
local button = script.Parent
local gradient = button.UIGradient
local ts = game:GetService("TweenService")
local ti = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In)
local offset1 = {Offset = Vector2.new(.75, 0)}
local create = ts:Create(gradient, ti, offset1)
local startingPos = Vector2.new(-1, 0)
local addWait = 0
--//ANIMATIONS:
local function animate()
create:Play()
create.Completed:Wait() --wait for the tween to stop
gradient.Offset = startingPos --resets offset
create:Play() -- repeats anim
create.Completed:Wait()-- waits for the tween to stop
gradient.Offset = startingPos
wait(addWait) --waits some time for the tween to stop
animate() -- calls itself (for looping)
end
animate() -- calls the all funcions!!
Here we are using TweenService to tween the gradient.
We are gonna use the linear EasingStyle to make the tween look smoother.
The offset defines to where the gradient is gonna move.
The startingPos defines to where the gradient is gonna start moving. Pretty self-explained.
And, addWait is how much we will wait for the next tween to start.
Now, let’s make it work.
First, let’s create the tween. We have a variable here called create. We use the function TweenService:Create, and then we put the variables we got. (gradient - definition of the UIGradient, ti - The animation style, offset1 - the position to where the UIGradient is gonna move)
Okay, we created the animation, now, we put it in action.
Here we have a function called animate.
We play the animation and then wait for it to stop.
When it stops, we set the UIGradient’s offset to the starting position.
We play the animation AGAIN and wait it to stop. (because the brighter part was in the middle in the first tween)
When the animation stops, we set the offset back to where it was.
We wait a bit. (addWait)
And then we call the function itself so we can put it in an infinite loop.
When we got everything set, we are ready to go. So, we call the animate function.
Result:
https://gyazo.com/c5c33f8431711c7232f3ebf8f72ca528
So, that’s it! 
I hope this tutorial helped you to successfully create an UIGradient animation!
This is my first tutorial ever, so please give feedback if you’d like!