Hpw to make UI that looks like the animation editor?

SalvatoreScripts · July 21, 2026, 11:46pm

How would I join two scrolling frames, or make it so that I have two lists of content in a scrolling frame? See the animation editor- it has space for the keyframes and the dropdowns and each corresponding item is aligned, but you can scroll in both frames at the same time. Trying to make UI like this. You can resize it too and both sections respect each other.

I’ve made ui pretty close to this, but I don’t know how to get the edge of the keyframe info for that item to align with the edge of the ui.

wiwkww92l2si2kwiwkwk · July 23, 2026, 11:51pm

To make two ScrollingFrame elements scroll in perfect sync, you need to bind their CanvasPosition properties using a property change event. Here is how to achieve that:

1. The Synchronization Script:
Don’t use RenderStepped, as that is overkill. Instead, use GetPropertyChangedSignal on the “Master” frame:

-- Assuming 'LeftFrame' is your list of names and 'RightFrame' is the keyframe editor
LeftFrame:GetPropertyChangedSignal("CanvasPosition"):Connect(function()
    RightFrame.CanvasPosition = Vector2.new(RightFrame.CanvasPosition.X, LeftFrame.CanvasPosition.Y)
end)

Ionypex23 · July 24, 2026, 12:53am

That works for basic syncing, but it’ll break if the content size changes dynamically and one frame ends up longer than the other. You should also check if you actually need two frames at all; sometimes a single frame with a custom layout is much easier to manage than trying to keep two separate CanvasPositions in sync.

Yarik_superpro · July 24, 2026, 1:07am

It’s a mouse icon change
I have made exactly that in my plugin

You can look at the source code to go in-depth.
To trigger that, either check the distance from the edge or alternatively create an invisible button

github.com/YarikSuperpro/PrePack

PrePack.luau

37d099c20


      
          	SetProperty(Templates,"Size",UDim2.new(Procentage,-6,1,0))

          	SetProperty(LayoutEditor,"Size",UDim2.new(1-Procentage,-6,1,0))

          	SetProperty(LayoutEditor,"Position",UDim2.new(Procentage,6,0,0))

          	SetProperty(ScaleSlider,"Position",UDim2.fromScale(Procentage,0.5))

          end

          local drag_Object:InputObject

          

          Connect(GetProperty(ScaleSlider,"InputBegan"),function(input:InputObject):()

          	if InputObject_Get(input,"UserInputType")~=Enum.UserInputType.MouseButton1 or InputObject_Get(input,"UserInputState")~=Enum.UserInputState.Begin then return end

          	drag_Connection = Connect(Main_MouseMoved,drag_Function)

          	SetProperty(PluginMouse,"Icon","rbxasset://SystemCursors/SplitEW")

          	drag_Object=input

          	SetProperty(ScaleSlider,"BackgroundColor3",TabColor)

          end)

          

          Connect(GetProperty(ScaleSlider,"InputEnded"),function(input:InputObject):()

          	if input~=drag_Object or InputObject_Get(input,"UserInputState")~=Enum.UserInputState.End then return end

          	Disconnect(drag_Connection::RBXScriptConnection)

          	drag_Connection=nil

          	SetProperty(PluginMouse,"Icon","rbxasset://SystemCursors/Arrow")

          	SetProperty(ScaleSlider,"BackgroundColor3",StrokeColor)