MouseHover tween on multiple items in a table

Help and Feedback Scripting Support
#1

I’m working on this folding card effect in a GUI and it works somewhat. The biggest issue is if you went from one frame to the other, without running your mouse off all of the frames, all frames begin moving in on themselves. I’ve been trying to find a fix but I keep finding myself revert back to its original state.

I even tried using the least efficient way possible by writing down the position of each individual frame and then executing the forward position and backwards position of each frame depending on whether your mouse is hovering or not. When I did this, frames wouldn’t move if you went from one frame to the other, your mouse has to completely be off all frames.

I also tried checking for a value, if the value is false, then move over.

I tried getting the default position of each frame so that when your mouse leaves, it’s supposed to go to that position, but then they all just collide into one bunch, not sure where I went wrong with that one.

This is the code I’m working with. Any help would be appreciated.

----------- OPTIONS HOVER
local frameTable = {
	["ImageButton1"] = MainOptions.ImageButton1,
	["ImageButton2"] = MainOptions.ImageButton2,
	["ImageButton3"] = MainOptions.ImageButton3,
	["ImageButton4"] = MainOptions.ImageButton4,
	["ImageButton5"] = MainOptions.ImageButton5,
}
local function AnimateElementIn(Element)
	Element:TweenPosition(UDim2.new(Element.Position.X.Scale + 0.03,0,0.5,0),"Out","Linear",0.1,true)
end	

local function AnimateElementOut(Element)
	Element:TweenPosition(UDim2.new(Element.Position.X.Scale - 0.03,0,0.5,0),"Out","Linear",0.1,true)
end	

for Index,Frame in pairs(frameTable) do
	Frame.MouseEnter:Connect(function()
		Frame.Image = "http://www.roblox.com/asset/?id=6324380780"
		Frame:TweenSize(UDim2.new(0.218,0,0.9,0),"Out","Linear",0.1,true)
		local tween = TweenService:Create(Frame, tweenInfo, {ImageTransparency = 0})
		tween:Play()

		for Key,Element in pairs(frameTable) do
			if tonumber(Key:sub(#Key)) > tonumber(Frame.Name:sub(#Frame.Name)) then
				AnimateElementIn(Element)
			end
		end
	end)

	Frame.MouseLeave:Connect(function()
		Frame:TweenSize(UDim2.new(0.186,0,0.9,0),"Out","Linear",0.1,true)
		local tween = TweenService:Create(Frame, tweenInfo, {ImageTransparency = 0.8})
		tween:Play()
		Frame.Image = "http://www.roblox.com/asset/?id=6324381069"

		for Key,Element in pairs(frameTable) do
			if tonumber(Key:sub(#Key)) > tonumber(Frame.Name:sub(#Frame.Name)) then
				AnimateElementOut(Element)
			end
		end
	end)
end
4 Likes
#2

It seems you’re using a UIListLayout? Changing the size of one element naturally makes the other elements shift to make room for it. You need to make the elements not change size. To still get the effect you want, you can have the actual list elements be invisible Frames, and have the visible cards be children of those Frames. Animating the size of the visible cards shouldn’t have an effect on the list at all.

2 Likes
#3

No UiListLayout. The layout is custom. I want this UI to be super fluent, so I’m aware I will run into issues like this.
I come to the conclusion that it may be due to timing. Because once your mouse moves off one frame and on to the other, the code where all the frames reset itself after the code for all the frames to move over. This is why all the frames continuously reset their position even when I try adding a wait. Haven’t found the fix though.

2 Likes
#4

Hi, I just tried your code with a UIListLayout and it no longer has that problem. maybe the error is in your custom layout.

image

3 Likes
#5

UIListLayout offers no animation flexibility except for size modification. But I plan to have these cards fold in whilst bringing the selected card forward to cover your screen - opening up a new menu.
Otherwise, UiListLayout would have been perfect.
UiListLayout also has it’s own positions, so if I were to attempt to get it’s absolute position, it wouldn’t be accurate. Which is why I have to have this all custom. Didn’t realize the level of pain i’d have to go through. :confused:

I appreciate you taking the time to try though.

#6

If I can’t find a solution, I will resort to using UIListLayout and find some cheat to get my results.