How to get UI to smoothly follow

I wasn’t for sure what this is called exactly, but basically what I have been trying to achieve is having the white frame on the side smoothly follow to the button the mouse is highlighted over.

image

I’m pretty positive that tweenservice would be used, but I’m confused about where to start

script.Parent.MouseMoved:Connect(function()
	
end)

This is where I’ve started, not entirely for sure the best event to use. I’ve inserted the script into the slider frame.

image

not for sure if using folders is the best idea right now, but I just have it there for organization

Any help would be appreciated :slight_smile:

5 Likes

This is about TweenService. You can check it out at developer.roblox.com.

2 Likes

I think the best way to get the result you want is to use the MouseEnter event of each text button. Then, you would use TweenPosition to get your slider to the desired place.

Yeah, that’s what I thought! I know how to navigate myself through the TweenPosition, but I’m just confused as to how I would get the slider to tween to the button that my mouse hovers over.

When your mouse hovers over the button, you need to set the Y position of the indicator to the AbsolutePosition.Y value of the button.

2 Likes

Here’s how you can do this with your layout.

local MenuButtons = -- path to MenuButtons folder
local Slider = script.Parent

local XScale = Slider.Position.X.Scale

for _, button in pairs(MenuButtons:GetChildren()) do
    button.MouseEnter:Connect(function() 
        local YScale = button.Position.Y.Scale
        Slider:TweenPosition(UDim2.new(XScale, 0, YScale, 0), --rest of the properties)
    end)
end

A small error.

Slider:TweenPosition(UDim2.new(XScale, 0, YScale, 0))

Closing parenthesis follows the comment.

Oh, okay, I didn’t notice that.

Do I need to just add the end goals next? That is tweening the slider to match where the buttons are?

I made some changes to my original code, it should handle everything you mentioned.

I had some mistakes that I fixed, try using the code I sent.

Yeah, you should add a (+ 0.1) to X.Scale

I recommend using TweenService. Here’s some info about it. API Link

Thank you guys, it does work! Although I’m curious, how would I make it flow better? This is what it’s currently doing:

Decrease the time you’re setting in TweenPosition

It’s still acting up around the same.

local menuButtons = script.Parent.Parent.MenuButtons
local slider = script.Parent

local XScale = slider.Position.X.Scale

for _, menuButtons in pairs(menuButtons:GetChildren()) do
	menuButtons.MouseEnter:connect(function()
		local YScale = menuButtons.Position.Y.Scale
		slider:TweenPosition(UDim2.new(XScale, 0, YScale, 0), 0.1) --changed time value to this
	end)
end

I messed around with the time value and it was still doing relatively the same thing.

You’re missing multiple parameters. Take a look at the documentation: GuiObject | Documentation - Roblox Creator Hub

local CurrentTween = nil
for i,v in pairs(script.Parent.ButtonsFrame:GetChildren()) do
	if v.Name ~= "Highlight" and v:IsA("TextButton") then
		v.MouseEnter:Connect(function()
			if CurrentTween ~= nil then CurrentTween:Destroy() end
			local goal = {}
			goal.Position = UDim2.fromScale(script.Parent.ButtonsFrame.Highlight.Position.X.Scale, v.Position.Y.Scale)
			CurrentTween = game:GetService("TweenService"):Create(script.Parent.ButtonsFrame.Highlight, TweenInfo.new(.25), goal)
			CurrentTween:Play()
		end)
	end
end

GuiTest.rbxm (5.2 KB)

Think I got it, it seems to work A LOT better

local menuButtons = script.Parent.Parent.MenuButtons
local slider = script.Parent

local XScale = slider.Position.X.Scale

for _, menuButtons in pairs(menuButtons:GetChildren()) do
	menuButtons.MouseEnter:connect(function()
		local YScale = menuButtons.Position.Y.Scale
		slider:TweenPosition(UDim2.new(XScale, 0, YScale, 0),
			Enum.EasingDirection.In,
			Enum.EasingStyle.Sine,
			0.1
		)
	end)
end

It works so much better; you can still see the inconsistency (which is very minimal). Not for sure if there’s anything else I should change/edit, but this is the current product.

1 Like
local menuButtons = script.Parent.Parent.MenuButtons
local slider = script.Parent
local XScale = slider.Position.X.Scale
local CurrentTween = nil
for _, menuButtons in pairs(menuButtons:GetChildren()) do
	menuButtons.MouseEnter:connect(function()
		local YScale = menuButtons.Position.Y.Scale
		if CurrentTween ~= nil then CurrentTween:Destroy() end
		local goal = {}
		goal.Position = UDim2.new(XScale, 0, YScale, 0)
		local tweenInfo = TweenInfo.new(
			0.1,
			Enum.EasingStyle.Sine,
			Enum.EasingDirection.In
		)
		CurrentTween = game:GetService("TweenService"):Create(script.Parent, tweenInfo, goal)
		CurrentTween:Play()
	end)
end