Hello everyone! 
I’m currently working on a Daily Reward System and I’m trying to animate some elements of my GUI.
I want that a “check icon” draws on the player’s screen while claiming reward.
Therefore I got an idea of how to achieve this animation. I wanted to add a UIGradient to the ImageLabel I was using as an icon, and I wanted to display it from left to right.
So… after a few researches on the DefForum, I found out how to do it. Obviously, it’s impossible to tween UIGradient Transparency because it’s made of a NumberSequence with KeyPoints.
I chose to create a four KeyPoints NumberSequence to answer this struggle:
- A first KeyPoint at Time = 0
- A second one at time = 0.001
- A third one at time = 0.002
- A fourth one at time = 1.
To make it easier to understand, check this graph:
(I moved the 2nd and 3rd KeyPoints so you can better see them)
And here is the image relative to the previous graph:
(The goal was to produce the “cut” effect you can see)
To animate my icon, I used TweenService by creating an NumberValue equal to 0.001 (Time of KeyPoint 1) and to tween it until it reaches 0.998.
Then, each time the NumberValue is edited, I changed the NumberSequence bringing in new KeyPoints.
Here is the script relative to what I just expained:
local gradient = script.Parent
local TweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(
1.8,
Enum.EasingStyle.Sine,
Enum.EasingDirection.InOut,
0, false, 0
)
local NumberValue = Instance.new("NumberValue")
NumberValue.Value = 0.001
TweenService:Create(NumberValue, tweenInfo, {Value = 0.998}):Play()
NumberValue.Changed:Connect(function(value)
gradient.Transparency = NumberSequence.new(
{
NumberSequenceKeypoint.new(0, 0),
NumberSequenceKeypoint.new(value, 0),
NumberSequenceKeypoint.new(value + 0.001, 1),
NumberSequenceKeypoint.new(1, 1)
}
)
end)
However, my script works correctly only if the TweenInfo.Time value is lower than 1.8. Either, it randomly cuts and stop execting with no error.
Here are two videos of the same script running, reaching different results:
Please let me know if you have any idea of why this problem occurs. Is it because I refresh too many times? I thought of using a loop instead of TweenService, that I would update 998 times, but I won’t be able to reproduce the Sine InOut effect that I want to use.
Anyways, thanks a lot for your attention and for your help.
Have a great day!