Spring Driven UI Problem

[Swe_pig (Lukkan1337)]

Hello, I have this problem when where your cursor doesn’t leave the frame before entering a new frame the other frame overlaps the other!

Any help would be appreciated

here is the module dev forum page: Spring-driven motion - spr
module API: GitHub - Fraktality/spr: Spring-driven motion library
Game file:
springmotion.rbxl (61 KB)

local spr = require(script.Parent.ModuleScript)
local frame = script.Parent.Simple
local button = script.Parent.TextButton


frame.Blue.MouseEnter:Connect(function()
	
	spr.target(frame.Blue, 0.6, 4, {
		Size = UDim2.fromScale(0.4,1.6)
	})
	
	spr.target(frame.Red, 0.6, 4, {
		Position = UDim2.fromScale(0.575, 0.8)
		
	})
	
	spr.target(frame.Green, 0.6, 4, {
		Position = UDim2.fromScale(0.825, 0.8)

	})
	
	
end)

frame.Blue.MouseLeave:Connect(function()

	spr.target(frame.Blue, 0.6, 4, {
		Size = UDim2.fromScale(0.25,1.6)
	})

	spr.target(frame.Red, 0.6, 4, {
		Position = UDim2.fromScale(0.5, 0.8)

	})
	

	spr.target(frame.Green, 0.6, 4, {
		Position = UDim2.fromScale(0.75, 0.8)
	})

end)

frame.Green.MouseEnter:Connect(function()

	spr.target(frame.Blue, 0.6, 4, {
		Position = UDim2.fromScale(0.175, 0.8)
	})
	
	spr.target(frame.Red, 0.6, 4, {
		Position = UDim2.fromScale(0.425, 0.8)

	})

	spr.target(frame.Green, 0.6, 4, {
		Size = UDim2.fromScale(0.4,1.6)

	})


end)

frame.Green.MouseLeave:Connect(function()

	spr.target(frame.Blue, 0.6, 4, {
		Position = UDim2.fromScale(0.25, 0.8)
	})

	spr.target(frame.Red, 0.6, 4, {
		Position = UDim2.fromScale(0.5, 0.8)

	})

	spr.target(frame.Green, 0.6, 4, {
		Size = UDim2.fromScale(0.25,1.6)
	})

end)

frame.Red.MouseEnter:Connect(function()

	spr.target(frame.Blue, 0.6, 4, {
		Position = UDim2.fromScale(0.175, 0.8)
	})

	spr.target(frame.Red, 0.6, 4, {
		Size = UDim2.fromScale(0.4,1.6)

	})

	spr.target(frame.Green, 0.6, 4, {
		Position = UDim2.fromScale(0.825,0.8)
		})
end)

frame.Red.MouseLeave:Connect(function()

	spr.target(frame.Blue, 0.6, 4, {
		Position = UDim2.fromScale(0.25, 0.8)
	})

	spr.target(frame.Red, 0.6, 4, {
		Size = UDim2.fromScale(0.25,1.6)

	})

	spr.target(frame.Green, 0.6, 4, {
		Position = UDim2.fromScale(0.75,0.8)

	})

end)

[GulgPlayer (Gulg)]

Try using AnchorPosition and remove all of your position animations.

[Swe_pig (Lukkan1337)]

do you perhaps mean anchor point? if not then what is AnchorPosition

[Im_Hiatus (Hiatus)]

Use a UIListLayout and keep track of which component you are hovering over and it’ll be simple:

local Spring = require(script.Spring)
local PlayerGui = game:GetService("Players").LocalPlayer:WaitForChild("PlayerGui")

local ScreenGui = Instance.new("ScreenGui")
local MainFrame = Instance.new("Frame", ScreenGui)
MainFrame.AnchorPoint = Vector2.new(0.5, 1)
MainFrame.Size = UDim2.fromScale(0.6, 0.3)
MainFrame.Position = UDim2.fromScale(0.5, 1.1)
MainFrame.BorderSizePixel = 0
MainFrame.BackgroundColor3 = Color3.new(1, 1, 1)
Instance.new("UICorner", MainFrame).CornerRadius = UDim.new(0.1, 0)

local Frame = Instance.new("Frame", MainFrame)
Frame.AnchorPoint = Vector2.new(0.5, 0.5)
Frame.Size = UDim2.fromScale(0.9, 1)
Frame.Position = UDim2.fromScale(0.5, 0.5)
Frame.BackgroundTransparency = 1

local UIListLayout = Instance.new("UIListLayout", Frame)
UIListLayout.FillDirection = Enum.FillDirection.Horizontal
UIListLayout.VerticalAlignment = Enum.VerticalAlignment.Center
UIListLayout.HorizontalAlignment = Enum.HorizontalAlignment.Left

local Components = {}
local current_component = nil

local function Component(props)
	local component = Instance.new("Frame", Frame)
	component.Name = props.Name
	component.Size = UDim2.fromScale(1/3, 1)
	component.BackgroundColor3 = props.BackgroundColor3
	component.BorderSizePixel = 0
	
	Components[component] = true
	
	component.MouseEnter:Connect(function()
		if current_component == component then return end
		current_component = component
		
		Spring.target(component, 0.6, 4, {
			Size = UDim2.fromScale(0.4, 1)
		})
		
		for other in Components do
			if other == component then continue end
			Spring.target(other, 0.6, 4, {
				Size = UDim2.fromScale(0.3, 1)
			})
		end
	end)
	
	component.MouseLeave:Connect(function()
		if current_component ~= component then return end
		current_component = nil
		
		for component in Components do
			Spring.target(component, 0.6, 4, {
				Size = UDim2.fromScale(1/3, 1)
			})
		end
	end)
	
	return component
end

Component {
	Name = "Blue",
	BackgroundColor3 = Color3.new(0.243137, 0.572549, 1)
}
Component {
	Name = "Red",
	BackgroundColor3 = Color3.new(1, 0.364706, 0.427451)
}
Component {
	Name = "Green",
	BackgroundColor3 = Color3.new(0.556863, 1, 0.435294)
}

ScreenGui.Parent = PlayerGui