How to tween a GUI from no where?

I have a GUI element (button) and I want it to be so that when I press that button another GUI element comes out of it, a bit like the skill tree in tower of hell. I experimented with tweening, except I can't make a frame seem like it is coming out of the button, without suddenly appearing or suddenly disappearing. How could I tween the frame to look like it is seamlessly coming out of the button? Thanks!

Set the GUI you want to tween's ZIndex to be lower than the button's ZIndex, then tween it. Make sure:

• both GUI elements are visible.

Here's a quick simple script that adjusts an element's ZIndex in accordance to it's parent:

local ui = script.Parent;
local button = script.Parent.Parent;
ui.ZIndex = button.ZIndex - 1;

That would be a localscript placed inside the UI you're tweening.

More about ZIndex here.

@GeneratedScript

But my menu is bigger than my button so won't it just goes straight through it, also my menu barley moves?

Buttons position: {0.025, 0},{0.182, 0} (the button is called menu)

local open = false
local ui = script.Parent.Parent.ScrollingMenu
local button = script.Parent
ui.ZIndex = button.ZIndex - 1

script.Parent.MouseButton1Click:Connect(function()
 if open == false then
	script.Parent.Parent.ScrollingMenu:TweenPosition(UDim2.new(0.025, 0,0.25, 0), "In", 
open - true
"Sine", 1)
else
	script.Parent.Parent.ScrollingMenu:TweenPosition(UDim2.new(0.025, 0,0.182, 0), "Out", "Sine", 1)
	open = false
	
		
	
	
	end
	end)