Open Window Animation

A simple animation for opening a window like the screen shot.


Shader code
shader_type canvas_item;

//varible for editing effect
const float animation_time = 10.0;
const float animation_center_x = 0.5;
const float rect_top = 0.0;
const float speed_up = 10.0;

//const for calculate
const vec2 center_of_circle = vec2(0.5,0.0);
const float max_progress = 1.2;

//Method for rect animation
float get_rect_color(float progress,vec2 _uv){
	float rect_left = animation_center_x - progress/2.0;
	float rect_right = animation_center_x + progress/2.0;
	float rect_down = rect_top + progress;
	if(_uv.x >= rect_left && _uv.x <= rect_right && _uv.y <= rect_down){
		return 1.0;
		return 0.0;

//Method for circle animation
float get_circle_color(float progress,vec2 _center,vec2 _uv){
	float _radius = distance(_center,vec2(_center.x,progress));
	float _distance = distance(_center,_uv);
	float ret = step(_radius,_distance);
	if(ret == 1.0){
		ret = 0.0;
		ret = 1.0;
	return ret;

void fragment(){
	float progress = clamp(pow(TIME,speed_up)/animation_time,0,max_progress);
	if(COLOR.a != 0.0){
		//Switch Method if you need diffrent type of effect
		//COLOR.a = get_circle_color(progress,center_of_circle,UV);
		COLOR.a = get_rect_color(progress,UV);
2d, animation, CC0, ui
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Wobbly Effect – Hand painted animation

Undertale Animation Skew

Foliage animation

Notify of

Inline Feedbacks
View all comments