Getting the smooth material effect


Currently my ui looks like this ^
How do I get the size and position to tween at the same time instead of one at a time? TweenSizeAndPosition didn’t work either.

Could we see the code you’re using to do the tween with? I’m going to just have to speculate that you’re adding a wait that Isn’t needed there.

Also, you could tween two properties at once like so:

local Tween = TweenService:Create(Text, TweenInfo(0.3), {Size = UDim2.new(0, 1, 0, 1), Position = UDim2.new(0, 1, 0, 1)}) -- JUST AN EXAMPLE
Tween:Play()

It may not be UDim2.new though I’m forgetting as I’m not currently on studio but thats the basic jist of it, hopefully that helps :+1:

TweenSizeAndPosition should work, are you sure you’re providing the current endPosition and endSize? You can find information on it here:
https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenSizeAndPosition

This doesn’t change anything. It still looks the same.

Here's the code:
local frame = script.Parent
local actualinput = frame.ActualInput
local underline = frame.Underline
local inputtitle = frame.InputTitle
local tweenservice = game:GetService("TweenService")
actualinput.Focused:Connect(function()
	local Tween = tweenservice:Create(inputtitle, TweenInfo.new(0.3), {Size = UDim2.new(.2, 0, 1, 0), Position = UDim2.new(0, 0, -.7, 0)})
Tween:Play()
--	print("Focus")
--inputtitle:TweenSize(UDim2.new(.2,0,1,0),"Out","Linear",.2,true)
inputtitle.Font = "SourceSansSemibold"
--inputtitle:TweenPosition(UDim2.new(0,0,-.7,0),"Out","Linear",.3,true)



end)

actualinput.FocusLost:Connect(function()
	--print("FocusLost")
	if string.len(actualinput.Text) > 0 and not string.find(actualinput.Text," ") then
	
	else
		actualinput.Text = ""
	
		inputtitle:TweenPosition(UDim2.new(0,0,0,0),"Out","Linear",.2,true)
		inputtitle.Font = "SourceSans"
	 inputtitle:TweenSize(UDim2.new(1,0,1,0),"Out","Linear",.3,true)
		end

end)

It doesn’t, I have double checked and everything.

What it looks like with the above code:

Try this, it might have something to do with trying to change fonts mid tween.

local frame = script.Parent
local actualinput = frame.ActualInput
local underline = frame.Underline
local inputtitle = frame.InputTitle
local tweenservice = game:GetService("TweenService")
actualinput.Focused:Connect(function()
--	print("Focus")
    inputtitle:TweenSizeAndPosition(UDim2.new(.2,0,1,0), UDim2.new(0,0,-.7,0), "Out", "Linear", .2, true)
    inputtitle.Font = "SourceSansSemibold"



end)

actualinput.FocusLost:Connect(function()
	--print("FocusLost")
	if string.len(actualinput.Text) > 0 and not string.find(actualinput.Text," ") then
	
	else
		actualinput.Text = ""
	
		inputtitle.Font = "SourceSans"
		inputtitle:TweenSizeAndPosition(UDim2.new(1,0,1,0),UDim2.new(0,0,0,0),"Out","Linear",.3,true)
		end

end)
1 Like

Still looks like this:

I believe I understand what your problem is, its due to the TextScaled property as demonstrated here:
https://gyazo.com/d054651961927095591e0fcac15806f4

As you can see, it only begins shrinking the text after it begins touching the border, it matches the same property as your text transition as well.

Using a hacky method for now might fix it, just add a UIAspectRatio and size it to be near on the border so that when you tween it…
https://gyazo.com/77f5840bd9a4730e79f61a917d9b0654

You can automatically add a UIAspectRatio thats relative to the offset size using this plugin (Click Add Constraint Button when you get it):

EDIT: If you want it to be more consistent and not possibly be hacky or break depending on screen sizes, you can replace it with imagelabels instead that’ll automatically resize for you plus, you can go even larger than the max size for text labels however, it may be inconsistent with roblox fonts so use with care:

https://gyazo.com/a3a114ceb101ea95e8bc0d6d79a6e6f3

They really should remove the limit on text scaled sometimes, it makes it mildly annoying for us developers to even use it to its fullest potential :pensive:

One last thing before I go, found this post that may be used to apply to bypass text scaled tho a little hacky: Increase or Remove TextSize Limit - #6 by Irreflexive

4 Likes

3 Likes