GUI Animations

There is six main animation types:

There is a seventh animation type, ‘wait‘, which is used alongside other animations.


General Info

When defining an animation instead of the usual ‘type’ within the definition you will instead need to use ‘anim_type’.

“animation”: {
“anim_type”: “. . .”,
. . .
}

When setting a variable to use an animation you need to use an ‘@’ at the beginning of the definition.

“element”: {
“variable”: “@animation”,
. . .
}

The ‘next’ variable is used to chain animations together, it must refer to an animation of the same type or a ‘wait‘ animation, you can refer to the same animation to allow an animation to loop, as by default they won’t, except for flip book animations which will always loop.

“animation”: {
. . .
“next”: “@animation”
}

Animations (except flip book) allow for an ‘easing’ to be set, by default it is set to linear. To see all the easing options you can use easings.net, although you will need to rename the easings slightly.
Drop the ‘ease’ from the beginning and the easing will need to be written in ‘snake_case’, ie ‘easeInSine’ > ‘in_sine’, ‘easeInOutQuart’ > ‘in_out_quart’

“animation”: {
“easing”: “in_sine”
. . .
}


Flip Book

Flip book animations are the standard animations that anyone who’s done animated textures will know about.
The animation is set as separate frames all placed side by side in a single png, for GUIs the animation frames are set horizontally rather than vertically like blocks and items.

flip_book_test

Flip book animations are split into two separate items defined wihtin the json files, the image and the animation.
The image definition is defined as usual, which can be seen in basic terminology, with two additions, ‘uv’ and ‘uv_size’

“anim_image”: {
“type”: “image”,
“texture”: “path/to/texture”,
“uv_size”: [8, 8],
“uv”: “@flipbook_animation”
}

uv_size‘ – this is the size of each frame in the animation.
uv‘ – this is the defined animation.

“flipbook_animation”: {
“anim_type”: “flip_book”,
“frame_count”: 4,
“fps”: 0.5
}

frame_count‘ – this is the amount of frames in the animation.
fps‘ – this is how many frames will be shown per second, the higher the number the faster the animation will be.

reversible‘ – defaults to false, when set to true the animation will play in reverse instead of just starting again from the beginning, when finished.
NB – if reversible is set to true, the first and last frames will be played twice, when the animation restarts, this can be seen below, the green and blue squares are shown twice as long as the other frames. Reversible is exclusive to flip book animations.

flip_book_animation


Offset

An offset animation can be applied to any GUI element that can be offset, simply by setting the offset of the element to the defined animation.

“img”: {
. . .
“offset”: “@offset_animation”
}

“offset_animation”: {
“anim_type”: “offset”,
“from”: [0, 0],
“to”: [-50, 0],
“duration”: 3
}

from‘ – this is the start offset of the element.
to‘ – this is the final offset of the element.
duration‘ – this is how long the animation will last in seconds.

offset_animation

In the above animation I have used the ‘next’ variable in the animation to specify another animation that is the same but with the ‘from’ and ‘to’ have been swapped.

“offset_animation”: {
“anim_type”: “offset”,
“from”: [0, 0],
“to”: [-50, 0],
“duration”: 3,
“next”: “@offset_reverse”
}

“offset_reverse”: {
“anim_type”: “offset”,
“from”: [-50, 0],
“to”: [0, 0],
“duration”: 3
“next”: “@offset_animation”
}


Alpha

Alpha animations simply allow you to change the alpha transparency of an image.

“img”: {
“type”: “image”,
. . .
“alpha”: “@alpha_animation”
}

“alpha_animation”: {
“anim_type”: “alpha”
“from”: 1,
“to”: 0.4,
“duration”: 5
}

from‘ – this is the starting alpha of the image.
to‘ – this is the final alpha of the image.
duration‘ – this is how long the animation will last in seconds.

The ‘from’ and ‘to’ values will be a number between and including 0 – 1, where 0 is full transparent and 1 is fully opaque.

alpha_animation


UV

A UV animation allows you to change the UV of a texture.

This is similar to a flip book animation, a UV animation will have a small section of a much larger texture selected at once, then it will scroll across the texture to the new UV value.

“img”: {
. . .
“uv_size”: [8, 8],
“uv”: “@uv_animation”
}

“uv_animation”: {
“anim_type”: “uv”,
“from”: [0, 0],
“to”: [24, 0],
“duration”: 8
}

from‘ – this is the starting UV value.
to‘ – this is the final UV value.
duration‘ – this is how long the animation will last in seconds.

The UV values will refer to the top left corner of the UV, with the size being specified within the image definition.

uv_animation


Size

A size animation allows you to change the size of GUI elements.

“img”: {
. . .
“size”: “@size_animation”
}

“size_animation”: {
“anim_type”: “size”,
“from”: [16, 16],
“to”: [64, 64],
“duration”: 8
}

from‘ – this is the initial size of the element.
to‘ – this is the final size of the element.
duration‘ – this is how long the animation will last in seconds.

size_animation

Quick point about anchors:
You may have seen ‘anchor_from’ or ‘anchor_to’, in some of the json files.
The ‘anchor_to’ is where the item will be anchored, this can be seen when resizing, as the element won’t move it’s anchor point.
There is 9 options: ‘top_left’, ‘top_middle’, ‘top_right’, ‘left_middle’, ‘center’, ‘right_middle’, ‘bottom_left’, ‘bottom_middle’, ‘bottom_right’.
In the animation above the image has it’s ‘anchor_to’ set to ‘center’, meaning the image is being resized from the center, if set to ‘top_right’ the top left corner of the image wouldn’t move.

size_animation_anchor


Color

Color animations allow you to apply a changing color onto images.

“img”: {
. . .
“color”: “@color_animation”
}

“color_animation”: {
“anim_type”: “color”,
“from”: [1, 0, 0],
“to”: [0, 0, 1],
“duration”: 5
}

from‘ – this is the starting color to be applied.
to‘ – this is the final color to transition to.
duration‘ – this is how long the animation will last in seconds.

The color values are RGB lists, in the example above, the start color is red, and the final color is blue. Each RGB value will be given as a value between 0 – 1.

color_animation


Wait

Wait animations aren’t actual animations, although they are defined in a similar way to regular animations.
They can only be used in conjunction with other animations, they allow you to pause an animation before moving to the next animation, after an animation has completed.

“anim_1”: {

“next”: “@anim_wait”
}

“anim_wait”: {
“anim_type”: “wait”,
“duration”: 2,
“next”: “@anim_2”
}

“anim_2”: {

“next”: “@anim_1”
}

duration‘ – this is how long it will last in seconds.


Animation examples MCpack – Contains examples of all animations seen on this page.

< See all bedrock json GUI tutorials