GUI animations

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By alibix
:warning: Old Version Published before Godot 3 was released.

How would I go about making a GUI that, say, when the mouse hovers it, the GUI will get slightly bigger to show that the mouse is hovering the GUI. Do I need to make my own sprite animation and somehow incorporate into GUIs or is there some kind of tween functions available?

I guess you have to do this yourself with GDScript, maybe the Tween node can help

Zylann | 2016-07-10 20:14

:bust_in_silhouette: Reply From: Zylann

Here is a way to do it:
http://zylannprods.fr/dl/godot/GuiButtonSizeAnim.zip

I thought I could use a Tween node to animate the scale of the button when the mouse enters or exits it, but because Controls origin is on the top-left, scale would not apply properly, so I had to put the button as child of a Node2D, and I animated the scale of the parent instead.

extends TextureButton

const SCALE = 1.2
const DURATION = 0.2

onready var _initial_scale = get_parent().get_scale()
var _scale_tween = null


func _ready():
	self.connect("mouse_enter", self, "_on_mouse_enter")
	self.connect("mouse_exit", self, "_on_mouse_exit")
	_scale_tween = Tween.new()
	add_child(_scale_tween)


func _on_mouse_enter():
	_scale_tween.interpolate_property(get_parent(), "transform/scale", \
		get_parent().get_scale(), _initial_scale*SCALE, DURATION, Tween.TRANS_QUAD, Tween.EASE_OUT)
	_scale_tween.start()


func _on_mouse_exit():
	_scale_tween.interpolate_property(get_parent(), "transform/scale", \
		get_parent().get_scale(), _initial_scale, DURATION, Tween.TRANS_QUAD, Tween.EASE_OUT)
	_scale_tween.start()

Wow, that wasn’t very hard! Thank you :slight_smile:
For a full GUI menu I would probably need a lot of these nodes or is there a way to have it so I can have multiple buttons that react the same way?

alibix | 2016-07-10 22:04

You can copy the node, or make it a re-usable scene to it’s easier to compose GUIs with it:

- Button 1 (Node2D)
    - Button
        - Label
- Button 2 (Node2D)
    - Button
        - Label
- Button 3 (Node2D)
    - Button
        - Label

etc
I find it a bit annoying to rely on that Node2D but it’s the simplest solution I found. Another solution would have been to tween the origin, with an additional Tween node and calculate the relative movement due to scaling so it stays centered…

Zylann | 2016-07-10 23:46

I found this from a search, and it was really helpful. However, I had to update it for Godot 3.1.1. Here’s a minimal project which demonstrates it: https://gist.github.com/MageJohn/1ead3c1d58e65cec0a5fced1618e1139 (Click download as zip). I was able to do it without Node2D, and I used a Vector2D for the scale factor, which allows different scales on the x and y axes. I also discovered that the scale happens from the point specified in the pivot offset (rect_pivot_offset).

MageJohn | 2019-08-30 22:49