Tweening Frame Across (to the right)

Help and Feedback Scripting Support
#1

I’m trying to make it so when the player presses a key, this frame (image below) would tween across to the right each click, if they stop clicking then it will begin to decrease back to the original size.

Original Size: {0.508, 0},{0, 0}
Max Size: (size to stop at) {0.508, 0},{0.953, 0}

image

Trying to achieve an effect similar to this.

Here’s the current code for increasing when clicking;

local originalSize = UDim2.new(0.508, 0, 0, 0)
local maxSize = UDim2.new(0.508, 0, 0.953, 0)
local incrementSize = UDim2.new(0.508, 0, Gui.Frame.Progress.Size.Y.Scale + 0.100, 0)
local decrementSize = UDim2.new(0.508, 0, Gui.Frame.Progress.Size.Y.Scale - 0.100, 0)

local newSize = progressFrame.Size + incrementSize

if newSize.Y.Scale > maxSize.Y.Scale then
	newSize = maxSize
end

local increaseTween = TweenService:Create(progressFrame, tweenInfo, {Size = newSize})
increaseTween:Play()

And here’s the current code for decreasing for not clicking;

local originalSize = UDim2.new(0.508, 0, 0, 0)
local maxSize = UDim2.new(0.508, 0, 0.953, 0)
local incrementSize = UDim2.new(0.508, 0, Gui.Frame.Progress.Size.Y.Scale + 0.100, 0)
local decrementSize = UDim2.new(0.508, 0, Gui.Frame.Progress.Size.Y.Scale - 0.100, 0)

local newSize = progressFrame.Size + decrementSize

if newSize.Y.Scale < originalSize.Y.Scale then
	newSize = originalSize
end

local decreaseTween = TweenService:Create(progressFrame, tweenInfo, {Size = newSize})
decreaseTween:Play()

i rushed so idk if im doing something wrong here or not :sob:

#2

So can anyone help me out with this :sob:

#3
  • Create a variable ‘value’, which is 0.
  • Every time key is pressed, add X (for example 0.1) to value, clamp between 0 and 1
  • Run a loop. When value > 0, subtract Y (for example 0.05) from value every T seconds.
  • Renderstepped: lerp the size towards the value. Note: You’ll need to adjust the alpha of the lerp using the distance between the current size and the value; this to ensure the speed is consistent between all lerps.
1 Like
#4

I understand everything else but can you show a code example for the 4th

#5 
local value = 0

function incrementValue(increment)
	value = math.clamp(value + increment, 0, 1)
end

local frame = script.Parent
local speed = 0.1 -- Adjust this to set the desired movement speed per second

game:GetService("RunService").RenderStepped:Connect(function(dt)
	local currentScale = frame.Size.X.Scale
	local targetScale = math.clamp(value, 0, 1)
	local direction = targetScale > currentScale and 1 or -1
	local distance_to_move = speed * dt

	-- Check if we’re close enough to the target to snap directly to it
	if math.abs(targetScale - currentScale) <= distance_to_move then
		frame.Size = UDim2.new(targetScale, 0, frame.Size.Y.Scale, frame.Size.Y.Offset)
	else
		-- Move in the direction of the target at a constant speed
		frame.Size = UDim2.new(currentScale + direction * distance_to_move, 0, frame.Size.Y.Scale, frame.Size.Y.Offset)
	end
end)

This’ll constrain the size to whatever value is. Now you just need to make a system which increments v if the player does something, and automatically decreases v in a loop

1 Like
#6

Thank you so much. Also how do I make it so the size of the frame cannot go past UDim2.new(0.508, 0, 0.953, 0) / {0.508, 0},{0.953, 0}?

#7

Also I’m only trying to increase the Y scale and not the X scales.

#8

Currently, it is clamped between 0 and 1.
The ratio between size and value is 1:1.
If we add x to value, we add x to size.
What a ratio also means, is essentially this:
1:1 is equal to 1value = 1size
Now you want to change the ratio to 1:0.508.

That means we have to multiply size with 0.508
1:0.508 is equal to 1value= 0.508size

1 Like
#9

Well, you must fix that yourself

1 Like
#10

The size won’t increase, not sure why

#11

So figure out why. Add prints to your code; print value, print distance_to_move.

#12

The prints work and the distance_to_move changes everytime to numbers similar to “0.003326379880309105” and the value increases every key press. Issue is Y scale remains the same and doesn’t change.

#13

Send the script, I will have a look

#14

Sent it to you, take your time

#15

Actually, send me the roblox place. That way I can test it.

Also, here’s a simple programming principle that, if you adopt it, will make your code much easier to work with. It’s called DRY.

#16

So this is wrong: it should go towards 0, not 1.
ddefa2f0c8a111c9805957288bdf7359

also, you made the progress bar invisible.

This code is too much of a mess, I’d start over

#17

Wrong. It’s not supposed to go towards 0, when you keep pressing a specific key it’s supposed to add size if they keep pressing the key and they can keep pressing until it reaches the max size. It only goes back to zero if they stop pressing the key.

well yes everything was invisible inside of it besides the bar and i made it go visible.

pls-

#18

Yes, and now it goes to 1 after pressing the key once. It should only go a small increment.