How to make tweening frame that indicate value

Hello
I just want make when value is 55 the size of frame will smaller and when 100 it’s be back again
Here is my script

script.Parent.OxygenValue:GetPropertyChangedSignal("Value"):Connect(function()
	local Change = UDim2.new(script.Parent.OxygenValue.Value/100*0,0,0.32)
	script.Parent.GreenOxygen:TweenSize(Change)
end)

Results:

I want like in this video:

Is it that the oxygen bar is going instantly to zero?

This is because on the Udim2, you’re multiplying the oxygenValue/100 by 0, meaning the x scale will always be 0 when the value of oxygen value changes.

Yeah is going instatly zero (30 charssss)

I would do this: (Assuming the oxygen value is 0-100

local oxygenFrame = script.Parent:WaitForChild('GreenOxygen')
local oxygenFrameXScale = oxygenFrame.Size.X.Scale

script.Parent.OxygenValue:GetPropertyChangedSignal('Value'):Connect(function()
 oxygenFrame:TweenSize(Udim2.new((oxygenFrameXScale/100)*script.Parent.OxygenValue.Value, 0, 0, 0.32)
end)

I haven’t tested this out, it’s all from memory so I hope it works.

Good luck! Reply if it works or not!

EDIT
If the oxygen value isn’t 0-100, then you just need to find the percentage (since its out of 100).

1 Like

i would use lerping

game:GetService("RunService").RenderStepped:Connect(function(lol)
script.Parent.GreenOxygen.Size = script.Parent.GreenOxygen.Size:Lerp(UDim2.new(script.Parent.OxygenValue.Value / 100,0,0,0.32),lol * 4)
end)

i didn’t test it, so it might result in a error yes

oh and btw

that’s because you multiplied it to 0

1 Like

Any of these methods don’t do that I want to do

What did my script do that you didn’t like?

Your script is doing this!

To indicate a value, you’d want to tween the size of bar to be proportional to the total size of the background bar as to the percentage value that you want to represent.

local IndicatorBar = script.Parent
local BarProgress = IndicatorBar:WaitForChild("Progress")

function ChangeValue(NewValue)
    local MaxValue = 100
    NewValue = NewValue / MaxValue
    local EasingDirection = NewValue < BarProgress.Size.X.Scale and "In" or "Out"
    BarProgress:TweenSize(UDim2.new(NewValue, 0, 1, 0), EasingDirection, "Quad", 0.25, true) -- the "true" is important because it will override the last tween.
end

Your script is doing this I just edited now it doing this but is too long just see!

Try changing the total speed.

Edit: I have made an example script.

local TOTAL_SPEED = 60 -- amount of seconds that the bar will go from full to empty

local RunService = game:GetService("RunService")
local LastTick = tick()

while RunService.RenderStepped:Wait() do
    local DeltaTime = tick() - LastTick
    ChangeValue(BarPorgress.Size.X.Scale - (DeltaTime / TOTAL_TIME))
    LastTick = tick()
end

Another edit: You can use this to follow something as a NumberValue, by doing the following:

local NumberValue = script.Parent:WaitForChild("NumberValue")

NumberValue.Changed:Connect(function(Property)
    if Property == "Value" then
        ChangeValue(NumberValue.Value)
    end
end)

What do you mean ???
((30 chaarsss)

Got it. This is because you’ve put the y as the offset and not the scale, and for the x size you’re using offset and not scale like you put in the original message. Mine works, but switch the scales and offsets on the UDim when you change the size.

And just say me what to do to fix it I’m little bit confused

Try this:

local oxygenFrame = script.Parent:WaitForChild('GreenOxygen')
local oxygenFrameXScale = oxygenFrame.Size.X.Scale

script.Parent.OxygenValue:GetPropertyChangedSignal('Value'):Connect(function()
 oxygenFrame:TweenSize(Udim2.new(0, (oxygenFrameXScale/100)*script.Parent.OxygenValue.Value, 0.32, 0)
end)

There’s a NumberValue for oxygen that it’s supposed to follow? I did not know that. Let me update my script.

It’s also 0-100, so there’s no need to calculate any percentages.

I’d still put it in a percentage, so it can go according to scale.

1 Like

The problem with your script is that you are multiplying it my 0:

(script.Parent.OxygenValue.Value/100*0,0,0.32)

Remove that 0:

(script.Parent.OxygenValue.Value/100,0,0.32)

So the script would look like this:

script.Parent.OxygenValue:GetPropertyChangedSignal("Value"):Connect(function()
    script.Parent.GreenOxygen:TweenSize(UDim2.new(script.Parent.OxygenValue.Value/100,0,0.32))
end)

No need to make the UDim2 a variable.

This wouldn’t work because its not going off the objects original size. If the oxygen was at half (50), it would set the GUI scale to half of the screen, not half the original GUI. Also, the maker of the topic didnt set his scaling/offsetting correct, the Y is a scale, not offset, and the X is an offset, not a scale, I got mixed up at first too :sweat_smile: