Is it possible to animate text color like this?

[yeaSimon (simonas)]

I’m just messing around with UI, and I wanna see if this is possible (going to explain in images):

Frame doesn’t go over text, text is white.

Frame goes over text slowly, part of the text that the frame is covering becomes black.

[typedwaves]

I believe this is possible with either UIGradient’s or a sprite sheet, UIGradient’s is probably the easiest method to do within Roblox.

You’d want to tween the UIGradient to match the tween of the white background frame.

I’ll work on getting a script together shortly, not in studio at the moment, if you’re able to do this on your own then let me know!

[Ovibion (Alexan)]

There are two methods that I use for this: one using UIGradients (as @typedwaves stated), and the other using a duplicate Frame. TweenService will be used for both of these methods. Let me explain.

Method 1 (UIGradients)
There will be one Frame and one TextLabel. Make sure the Frame is not over the TextLabel, rather that mean that you increase TextLabel’s ZIndex or you parent the TextLabel into the Frame.

Inside of both of these GuiObjects, there will be a UIGradient.

However, not all of the properties shall be the same. Here’s an image of the Frame’s UIGradient’s properties:

And here is an image of the TextLabel’s UIGradient’s properties:

When you “animate” these GuiObjects, you’re going to manipulate the Offset property inside of the UIGradients. Here’s an example:

local TweenService = game:GetService("TweenService")

local frame = -- [Insert the `Frame`'s location]
local frameGradient = frame.UIGradient

local label = frame.TextLabel
local labelGradient = label.UIGradient

local tweenInfo = TweenInfo.new(0.5)
local enterGoal, leaveGoal = {Offset = Vector2.new(-1, 0)}, {Offset = Vector2.new(1, 0)}

frame.MouseEnter:Connect(function()
    TweenService:Create(frameGradient, tweenInfo, enterGoal):Play()
    TweenService:Create(labelGradient, tweenInfo, enterGoal):Play()
end)

frame.MouseLeave:Connect(function()
    TweenService:Create(frameGradient, tweenInfo, leaveGoal):Play()
    TweenService:Create(labelGradient, tweenInfo, leaveGoal):Play()
end)

Method 2
You’ll need two Frames with TextLabels inside of both of them. One Frame will be inside of the other, and the Frame will be the same size as its parent (the other Frame). The TextColor3s and BackgroundColor3s will have to be contrary to one another.

So, we will have the first Frame with a white background, the first TextLabel with black text color, the second Frame with a black background and the second TextLabel with white text.

For this method, no UIGradient will be necessary. But as the second Frame moves, you will need to offset its TextLabel. Here’s an example:

local TweenService = game:GetService("TweenService")

local mainFrame = -- [The first `Frame`s location]
local overlayFrame = mainFrame.Overlay

local tweenInfo = TweenInfo.new(0.5)

overlayFrame:GetPropertyChangedSignal("Position"):Connect(function()
    overlayFrame.TextLabel.Position = UDim2.fromScale(0 - overlayFrame.Position.X.Scale, 0)
end)

mainFrame.MouseEnter:Connect(function()
    TweenService:Create(overlayFrame, tweenInfo, {Position = UDim2.fromScale(0, 0)}):Play()
end)

mainFrame.MouseLeave:Connect(function()
    TweenService:Create(overlayFrame, tweenInfo, {Position = UDim2.fromScale(1, 0)}):Play()
end)

Here are the results; the top Frame is the method using the UIGradients.

[typedwaves]

With the UIGradient method, I believe you can make the gradient immediately cut off so it has the same appearance as the second method.

[Ovibion (Alexan)]

Oh, really? I didn’t know and I was trying to figure out how. Will you please tell me? That’s why I came up with the second method.

[typedwaves]

Let me hop on studio real quick and check how to do it, I’ll get back to you in a couple minutes.

[Uzixt (Uzi)]

I’d imagine that you would have to put an extra arrow (or whatever they’re called) to create an immediate sharp colour change

[yeaSimon (simonas)]

This works perfectly, thank you! (And thank you to everyone who replied!) Sorry I didn’t see this earlier I was quite busy.