SOLVED! Scrolling Frame Canvas Position tweening to certain imageButton

[8WingedSeraph (ImaSeraph)]

I’m trying to create one of those “Crate Opening” animations that you see in games like MM2.

To do so, I am trying to tween the “Canvas Position” property, but I cannot get the correct positioning for a certain imageLabel.

I’m trying to code it so that it works perfectly on different devices / screen sizes, but it’s becoming a headache.

it always overshoots by a few labels, and it isn’t consistent across devices.

Ignore the parts that are commented out.

local function animation(itemName, itemTable)
	gui.Enabled = true
	
	mainframe.ContentFrame.ItemList.CanvasPosition = Vector2.new(0, 0)
	clearList(mainframe.ContentFrame.ItemList)
	
	local _template = script.Template
	
	for looping = 1, 40 do
		createTemplate(_template, mainframe.ContentFrame.ItemList)
	end
	
	local _myItem = createTemplate(_template, mainframe.ContentFrame.ItemList)
	_myItem.Icon.ImageColor3 = Color3.fromRGB(16, 60, 255)
	
	for looping = 1, 10 do
		createTemplate(_template, mainframe.ContentFrame.ItemList)
	end

	local absolutePosition = _myItem.AbsolutePosition.X
	local absoluteSize = _myItem.AbsoluteSize.X

	
	local a = absolutePosition + (absoluteSize / 2)
	local isEnd = a - mainframe.ContentFrame.ItemList.AbsoluteWindowSize.X
	
	--local isStart = isEnd - absoluteSize
	--local isMiddle = isEnd - (_myItem.AbsoluteSize.X / 2)

	--local isSize = absoluteSize / 2
	
	--local R = Random.new()
	
	--local randOffset = isMiddle + R:NextNumber(-isSize, isSize)
	--randOffset = math.clamp(randOffset, isStart, isEnd)
	
	local tween = game.TweenService:Create(
		mainframe.ContentFrame.ItemList,
		TweenInfo.new(5, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0),
		{
			["CanvasPosition"] = Vector2.new(isEnd, 0)
		}
	)
	
	tween:Play()
	
	tween.Completed:Wait()
	
	--_template = nil
	--_myItem = nil
	--absolutePosition = nil
	--absoluteSize = nil
	--isEnd = nil
	--isMiddle = nil
	--isStart = nil
	--isSize = nil
	--R = nil
	--randOffset = nil
	--tween = nil
end

The scrollingFrame contains a UIListLayout

[8WingedSeraph (ImaSeraph)]

Okay, so this is for those in the future who have no idea what to do.
I’ve solved the problem.

In a gui, you will have a scrollingFrame.
That scrollingFrame will contain “The items” quote on quote.

Next, you will have the marker, which is just a frame with an offset size of like 2 (horizontally)

local function createTemplate(temp, animGui)
	local newTemp = temp:Clone()
	newTemp.Visible = true
	newTemp.Parent = animGui
	return newTemp
end


local function animation(itemName, itemTable)
	gui.Enabled = true
	
	mainframe.ContentFrame.ItemList.CanvasPosition = Vector2.new(0, 0)
	clearList(mainframe.ContentFrame.ItemList)
	
	local _template = script.Template
	
	for looping = 1, 40 do
		createTemplate(_template, mainframe.ContentFrame.ItemList)
	end
	
	local _myItem = createTemplate(_template, mainframe.ContentFrame.ItemList)
	_myItem.Icon.ImageColor3 = Color3.fromRGB(16, 60, 255)
	
	for looping = 1, 10 do
		createTemplate(_template, mainframe.ContentFrame.ItemList)
	end

	local absolutePosition = _myItem.AbsolutePosition.X
	local absoluteSize = _myItem.AbsoluteSize.X


--this is the magic

	local isMag = (mainframe.ContentFrame.Frame.AbsolutePosition - _myItem.AbsolutePosition).Magnitude
	print(isMag)
	
	local isEnd = math.floor(isMag)
	
	
	local tween = game.TweenService:Create(
		mainframe.ContentFrame.ItemList,
		TweenInfo.new(5, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0),
		{
			["CanvasPosition"] = Vector2.new(isEnd, 0)
		}
	)
	
	tween:Play()
	
	tween.Completed:Wait()
	
	--_template = nil
	--_myItem = nil
	--absolutePosition = nil
	--absoluteSize = nil
	--isEnd = nil
	--isMiddle = nil
	--isStart = nil
	--isSize = nil
	--R = nil
	--randOffset = nil
	--tween = nil
end

animation()

In other words,