How can I tween or move points of a UIGradient?

hisupermario9 · February 28, 2021, 6:39am

I want to make a UiGradient move points but I’m not exactly sure how. I’ve looked around the DevFourm and didn’t find anything so I guess I’m asking here.
Here’s what I want to achieve in a script

iiPotatoFlamesii · February 28, 2021, 6:51am

You’ll want to use the following script below, though feel free to modify it anyway you would like too.

local TS = game:GetService("TweenService")
local TI = TweenInfo.new(
0.5, -- The amount of time it takes for the Tween to finish.
Enum.EasingStyle.Quad, -- The EasingStyle.
Enum.EasingDirection.Out -- The EasingDirection.
)
local UIGradientTween = TS:Create(
UIGradient, -- The UIGradient of the TextLabel.
TI, -- Our TweenInfo from earlier.
{Color = ColorSequence.new({ -- This is the properties we want to set. We use ColorSequence.new({}) to create an empty/new ColorSequence, which can be used by UIGradients.
    ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 255, 255)) -- This creates a new point in the ColorSequence. It takes the 2 parameters, which are the Time at which the point is, and the Color.

    -- We can easily copy this and create the effect just by using this.
}
)})

UIGradientTween:Play() -- Finally, we play the tween.

I hope this helps!

hisupermario9 · February 28, 2021, 7:03am

How exactly would I make the ColorSquence.new part look like the white is pushing the black over? I can’t wrap my head around it.

Spoiler Alert: I am bad at thinking

iiPotatoFlamesii · February 28, 2021, 7:13am

~~I just tried this out in studio, and it turns out that ColorSequences can’t be tweened. So, instead we’ll have to use an alternate method.~~

local TextLabel -- Make sure to define the TextLabel
local UIGradient -- Make sure to define the UIGradient as well.

function TweenGradient() -- This will be our function for tweening.
    -- This is a very specific use-case, as we assume that the first point on the colorsequence will always be white.

    for i = 0.01, -- This will be the starting point of the loop, AKA our first point position at the beginning.
    1, -- This is our endpoint that we'll reach on the loop
    0.01 -- This is the increment for the loop
    do
        UIGradient.Color = ColorSequence.new({
            ColorSequenceKeypoint.new(0, Color3.new(1, 1, 1)),
            ColorSequenceKeypoint.new(i, Color3.new(0, 0, 0))
        })

        wait() -- You can change this value to how long the tween will be.
    end
end

You can also read from the Developer Wiki below on more information on how to use ColorSequences, and hopefully that’ll allow you to create a more realistic effect, as I believe the one I have above will make a gradient from White to Black, but you should be able to figure it out on how to make it work, as it looks like you already figured it out in your original post, so you’ll just have to convert it to script form:

~~ColorSequence (Developer Wiki)~~

~~I hope this helps, and you can always ask questions here.~~

~~EDIT: Made it more readable and fixed a few errors.~~

EDIT: The post Lielmaster made below is a better approach to mine, so I will be crossing this post out.

Lielmaster · February 28, 2021, 7:14am

tween the offset of the UIGradient, Set the color sequence from white to black, then make the offset -1, 0 then tween the offset from -1,0 up to 1,0

Lielmaster · February 28, 2021, 7:17am

local gradient = script.Parent
local ts = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In)
local property = {Offset = Vector2.new(1, 0)}
local tween = ts:Create(gradient, tweenInfo, property) 
tween:Play()

experiment on this script i wrote

hisupermario9 · February 28, 2021, 7:22am

This doesn’t seem to work?
Is it meant to work with the correct setup I have already?

iiPotatoFlamesii · February 28, 2021, 7:24am

I would recommend using what Lielmaster said, as his uses a better method/approach than me, but if you do insist on using my own script, you probably forgot to call TweenGradient().

hisupermario9 · February 28, 2021, 7:26am

I thought that tweening them didn’t work, which is why I assumed it wouldn’t work.
Does it?

Lielmaster · February 28, 2021, 7:26am

trust me this looks really cool, insert a local script under the UIGradient and paste this:

wait(5)
print("tweening")
local gradient = script.Parent
local newColorSeq = ColorSequence.new
local newColorSeqKey = ColorSequenceKeypoint.new
local ts = game:GetService("TweenService")

gradient.Offset = Vector2.new(-1,0)

local tween = ts:Create(gradient, TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In),
	{Offset = Vector2.new(1,0)}
)
tween:Play()

wait(1)
gradient.Color = newColorSeq({newColorSeqKey(0,Color3.fromRGB(255,255,255)), newColorSeqKey(1, Color3.fromRGB(255, 255, 255))})
gradient.Offset = Vector2.new(-1,0)
tween:Play()

Edit: the wait(5) at the start is to wait for the game to load before tweening, I used wait(5) instead of game:IsLoaded() just for extra time

hisupermario9 · February 28, 2021, 7:32am

That looks sick actually.
Here’s the result.
https://cdn.discordapp.com/attachments/815486373796380672/815486405463638046/Desktop_2021.02.28_-_02.31.01.08.mp4
For whatever reason, the transparency of the text won’t work.
TweenService:Create(script.Parent.Frame.TextLabel, TweenInfo.new(0.25, Enum.EasingStyle.Linear, Enum.EasingDirection.In), {TextTransparency = 0}):Play()
Anything wrong?

Lielmaster · February 28, 2021, 7:37am

I assume, you use TextStroke,
If you did not know TextStroke will only appear if TextTransparency > 0, this means that even if TextTransparency is 0.2, TextStroke Transparency is still the same. change the TextStroke Transparency to 1 and change

to

{TextTransparency = 0, TextStrokeTransparency = 0}

hisupermario9 · February 28, 2021, 7:43am

I was just tweaking timing, but yea that fixed it.

Lielmaster · February 28, 2021, 8:02am

try this and just mess with the timing

wait(5)
print("tweening")
local gradient = script.Parent
local newColorSeq = ColorSequence.new
local newColorSeqKey = ColorSequenceKeypoint.new
local newNumSeq = NumberSequence.new
local newNumSeqKey = NumberSequenceKeypoint.new
local ts = game:GetService("TweenService")

local tween = ts:Create(gradient, TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.In),
	{Offset = Vector2.new(1,0)}
)

gradient.Transparency = newNumSeq({newNumSeqKey(0,0), newNumSeqKey(1,1)})
gradient.Color = newColorSeq({newColorSeqKey(0, Color3.fromRGB(0,0,0)), newColorSeqKey(1, Color3.fromRGB(0,0,0))})
gradient.Offset = Vector2.new(-1,0)
tween:Play()

wait(1)
gradient.Transparency = newNumSeq({newNumSeqKey(0,0), newNumSeqKey(1,0)})
gradient.Color = newColorSeq({newColorSeqKey(0, Color3.fromRGB(255,255,255)), newColorSeqKey(1, Color3.fromRGB(0,0,0))})
gradient.Offset = Vector2.new(-1,0)
tween:Play()

wait(1)
gradient.Color = newColorSeq({newColorSeqKey(0,Color3.fromRGB(255,0,0)), newColorSeqKey(1, Color3.fromRGB(255, 255, 255))})
gradient.Offset = Vector2.new(-1,0)
tween:Play()

wait(1)
gradient.Transparency = newNumSeq({newNumSeqKey(0, 1), newNumSeqKey(1, 0)})
gradient.Color = newColorSeq({newColorSeqKey(0,Color3.fromRGB(255,0,0)), newColorSeqKey(1, Color3.fromRGB(255,0,0))})
gradient.Offset = Vector2.new(-1,0)
tween:Play()

HafuPlay · February 23, 2023, 3:10pm

if you want tween gradient only with 2 colors, you can actually tween gradient offset.

local tween = TweenService:Create(Gradient,TweenInfo,{Offset = Vector2.new(0,1.00)})
tween:Play()

oops just find out that this question is 2 years old.

xure1 · May 3, 2023, 9:00pm

lol just realised that too