the way i would approach this:

  1. figure out maths to move object at an angle using x,y coords
  2. create a scene with that panels with animations and other states like when its activated it does the animation
  3. create the menu scene where i put them buttons in a list of sorts and do that math scroll diagonally

    Raptorkillz ok this is so easy:

    first, the buttons are positioned in a linear curve, they move a fixed distance horizontally and vertically, but it would be easier to move the parent.
    each button can be animated in an AnimationPlayer, or you can use Tweens in code.
    The screen can be a video or a scene you load with the things moving though animation or code.

    now, for changing between buttons, use godot's focus system, set next and previous buttons. when a button is focused it will have a signal that is emitted. this signal is called focus_entered, you can connect the signals of each button to a main script, and also connect the pressed signal for when the button is pressed. this will work with mouse and keyboard.

    In your main script, define a shift for each button in an Array of Vector2. when a button is focused, tween the parent to that shift, then call a function which will change the screen.
    a good way to implement the screen is to use a tab container. toggle the option to make the tab buttons disappear and put it behind the shapes, then when a button is focused, changed to the tab of that button.

    also, when a button is focused, play the animation of that button.

    var shift_positions : Array[Vector2] = [Vector2(0.5, 0.7), Vector2(1.5, 1.0), Vector2(2.5, 1.3)]
    var animations : Array[String] = ["options", "comp", "quit"]
    @export var anim : AnimationPlayer
    @export var screen_node : TabContainer
    
    func _ready() -> void:
         $button1.focus_entered.connect(move.bind(0))
         $button2.focus_entered.connect(move.bind(1))
         $button3.focus_entered.connect(move.bind(2))
         $button1.pressed.connect(options)
         $button1.pressed.connect(comp)
         $button1.pressed.connect(quit)
    
    func move(button_id : int = 0) -> void:
         position = shift_positions[button_id]
         anim.play(animations[button_id])
         screen_node.current_tab = button_id

    for the tv noise, you can call a function on the scene in the tab to display the noise for a moment.

      Raptorkillz because YOU have to define these functions to do what they are supposed to do. the code is not a copy paste, it's just an example on how you can do it.
      you should manually type code from the internet line by line to learn what it does in the process and find any errors using godot's intellisense.

      options, comp, quit do not exist, they should go to whatever menu you want, which is not in the scope of the question you made (or the video you showed).

      func options() -> void:
           #go to options
           pass

        Raptorkillz Jesusemora how would I make it work with inputs

        what do you mean by inputs? like keys or do you mean the signals?

        Raptorkillz kuligs2 How would the scene tree look like

        put your buttons inside a Control, space them anyway you want, you can use a container if you find one that can place them diagonally like that. this Control can be inside anything, but be a child of the root of the scene, you move this up and down, left and right.
        for the buttons, there's an option in inspector that let's you set a next and previous button for using the keys or joystick. with the mouse is more complicated.

        for triggering these functions and going to options, comp, etc, you can either hide elements of the scene and show/instantiate others, or, the easier way is to put each menu in a different tab of a tab container, so when you "press" one of the buttons it changes tab.

        Raptorkillz Okay but the img that I showed has a scroll container

        you asked how to do this, then hurried and did it before having any idea how.
        you'll have to remake everything, that's just how things are done. you can move some of the nodes and convert others, but it's best if you keep it simple.

        I don't see why you would put it inside a scroll container, it's going to look bad when the scrollbars appear and break everything, also it only goes up and down vertically, but you need to go up and to the side, down and to the other side.

        you should name your nodes before continuing, even if that takes a bit longer. also you are using CanvasLayers for holding stuff, you don't need to.
        put everything in the UI inside a single Control and avoid mixing Controls and 2D nodes. the 2D elements should be inside a Control in their corner/scene and not loose everywhere.

          Raptorkillz in the inspector, Controls have these options:

          it will change focus to Top when pressing the up key and Bottom when pressing the down key. You can also set Mode. It's very well documented and explained in the tooltips.

            4 months later

            Jesusemora I asked chat gpt and it gave me working code but the only thing that isn't working is that it uses tweens and the tween isn't moving

            extends Control
            
            @export var save = load("res://Data/Stages/Menu/SaveMenu.tscn")
            @export var encore = load("res://Data/Stages/Menu/EncoreMenu.tscn")
            @export var time = preload("res://Data/Stages/TZ/TestZonetime.tscn")
            @export var options =preload("res://Data/Stages/Menu/OptionsMenus.tscn")
            @export var Extras = preload("res://Data/Stages/Menu/ExtrasMenu.tscn")
            #go back to title 
            @export var back = preload("res://Data/Stages/Title/Title.tscn")
            
            # Variables for button management
            var buttons: Array = []
            var selected_index: int = 0
            var tween: Tween  # Declare a Tween variable
            
            # Called when the node enters the scene tree for the first time.
            func _ready():
            	buttons.clear()  # Clear any existing values (good practice)
            	
            	# Create a Tween instance
            	tween = get_tree().create_tween()  # Create a new Tween instance
            
            	# Loop through all child nodes of the Control node
            	for i in range(get_child_count()):
            		var button = get_child(i)
            		
            		# Check if the child is a TextureButton
            		if button is TextureButton:
            			buttons.append(button)  # Add it to the buttons array
            			button.set_meta("index", buttons.size() - 1)  # Store the button index as metadata
            			
            			# Connect the pressed signal using a lambda to pass the button
            			button.pressed.connect(Callable(self, "_on_button_pressed").bind(button))
            
            	# Set the initial selection
            	update_button_selection()
            
            func _input(event):
            	# Handle input for navigation
            	if event.is_action_pressed("gm_up"):
            		move_selection(-1)
            		$"../../CanvasLayer/Sprite2D".frame =0
            		$"../../CanvasLayer/AnimationPlayer".play("tv")
            		$"../../SFX/MenuBleep".play()
            		
            	elif event.is_action_pressed("gm_down"):
            		move_selection(1)
            		$"../../CanvasLayer/Sprite2D".frame =0
            		$"../../CanvasLayer/AnimationPlayer".play("tv")
            		$"../../SFX/MenuBleep".play()
            
            	# Handle 'gm_action' for triggering the selected button
            	elif event.is_action_pressed("gm_action"):
            		if selected_index >= 0 and selected_index < buttons.size():
            			buttons[selected_index].emit_signal("pressed")  # Manually emit the pressed signal for the selected butbutbutt
            	elif event.is_action_pressed("gm_action2"):
            		Global.main.change_scene_to_file(back, "FadeOut")
            func move_selection(direction: int):
            	var prev_index = selected_index  # Store the previous index
            	selected_index += direction
            	
            	# Wrap around selection
            	if selected_index < 0:
            		selected_index = buttons.size() - 1  # Wrap to the last button
            	elif selected_index >= buttons.size():
            		selected_index = 0  # Wrap to the first button
            	
            	# Update button visuals and start tween animation
            	update_button_selection()
            	
            	# Tween to create a smooth transition effect
            	tween.stop()  # Stop any ongoing tweens
            	var selected_button = buttons[selected_index]
            	var previous_button = buttons[prev_index]
            
            	# Move using `rect_position` for UI elements
            	var selected_target_pos = selected_button.position + Vector2(0, -10)
            	var previous_target_pos = previous_button.position + Vector2(0, 10)
            
            	# Create the tweens (separately without chaining)
            	tween.tween_property(selected_button, "position", selected_target_pos, 0.1)
            	tween.set_trans(Tween.TRANS_SINE)
            	tween.set_ease(Tween.EASE_IN_OUT)
            
            	tween.tween_property(previous_button, "position", previous_target_pos, 0.1)
            	tween.set_trans(Tween.TRANS_SINE)
            	tween.set_ease(Tween.EASE_IN_OUT)
            
            func update_button_selection():
            	# Update button visuals based on selection
            	for i in range(buttons.size()):
            		var button = buttons[i]
            		var anim = button.get_node("MainAnimator")
            		anim.play("default")
            
            		# Check if this button is the currently selected one
            		if i == selected_index:
            			# Play the hover animation
            			var start = button.get_node("MainAnimator")
            			start.play("click")
            			var animation_player = button.get_node("ShadeBlink")  # Adjust the path if needed
            			animation_player.play("blink")  # Play the hover animation
            			$"../../CanvasLayer/Sprite2D".frame =4
            			
            func _on_button_pressed(button):
            	# Retrieve the index from the button's metadata
            	var index = button.get_meta("index")
            	
            	# Play the press animation
            	var animation_player = button.get_node("MainAnimator")  # Adjust the path if needed
            	animation_player.play("blinkLabel")  # Play the press animation
            
            	# Handle button press actions based on the index
            	match index:
            		0:
            			$"../../SFX/MenuAccept".play()
            			await $"../../SFX/MenuAccept".finished
            			Global.main.change_scene_to_file(save)
            		1:
            			$"../../SFX/MenuAccept".play()
            			await $"../../SFX/MenuAccept".finished
            			Global.main.change_scene_to_file(encore)
            		2:
            			$"../../SFX/MenuNotReady".play()
            		3:
            			$"../../SFX/MenuNotReady".play()
            		4:
            			$"../../SFX/MenuAccept".play()
            			await $"../../SFX/MenuAccept".finished
            			Global.main.change_scene_to_file(options)
            		5:
            			$"../../SFX/MenuAccept".play()
            			await $"../../SFX/MenuAccept".finished
            			Global.main.change_scene_to_file(Extras)			

            DaveTheCoder Okay so your saying that I set it up like this
            var tween = create_tween()
            tween.tween_property($Sprite, "position", Vector2.RIGHT * 300, 1).as_relative().set_trans(Tween.TRANS_SINE)
            tween.tween_property($Sprite, "position", Vector2.RIGHT * 300, 1).as_relative().from_current().set_trans(Tween.TRANS_EXPO)

            That's partly right. But you shouldn't call tween_property() twice for the same object and property.