Problem with figuring out how to lerp/smoothly change a gui frame or button's background color

I’ve tried using
cover.BackgroundColor3:Lerp(Color3.fromRGB(0, 0, 0),Color3.fromRGB(255, 255, 255))
but nothing happens, The script is a localscript in the screengui and there’s a gui called cover, And yes I did local cover = script.Parent.cover but it’s hard to figure out how to change the background color from black to white.

Thats because the LERP function is not the best use case for this to start with, I’d suggest using tweenservice for any smooth appearance on Gui related stuff. Look into it as example you can do;

local tweenService = game:GetService("TweenService")
local cover = script.Parent.cover

tweenService:Create(object, tweeningInfo, {property = newValue}:Play()

hello!

@GL0XBE said everything that i want to say, ill just add some stuff…

Lerp is a function that gets one value and changes it according to a second value, which has to be a decimal, although it basically acts as a percentage. it DOES work on ui but is mainly used for CFrame calculations as @GL0XBE mentioned.

for example,
if the background color is black (0, 0, 0) and the color you want to lerp is white (255, 255, 255), by 10%, then you should call:

cover.BackgroundColor3:Lerp(Color3.fromRGB(255, 255, 255), 0.1) -- 0.1 = 10% of 1

in your case however, i agree that you should use TweenService instead, as it can be smoother, quicker, easier and better for performance.

And if you really want to have it take a percentage you can also make something like this basically able to tween it to a percentage;

Client/Server Script:

local repStorage = game:GetService("ReplicatedStorage")
local tween = require(repStorage.Tween)

local tweening = tween(object, {"propertyName", newPropertyValue, alpha}, tweeningInfo)
tweening:Play()

Module Script:

local tweenService = game:GetService("TweenService")

local function lerpEndAmount(a, b, t)
    return a + (b - a) * t
end

local function start(object, information: {}, tweeningInfo)
    local property = information[1]
    local startNumber = object[property]
    local endNumber = information[2]
    local alpha = information[3]
    
    local percentageAmount = lerpEndAmount(startNumber, endNumber, alpha)
    local tween = tweenService:Create(object, tweeningInfo, {[property] = percentageAmount})
    
    return tween
end

return start

Thank you so much, I appreciate the help!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.