How to animate a ColorRect to become invisible from left to right?

Question

I have a ColorRect that I want to animate so that it becomes transparent starting on the left and continuously becomes transparent moving right, creating the effect that the ColorRect is dissolving from left to right.

I can of course just animate the modulate attribute of the ColorRect, but this changes the entire transparency of the rect.

Is there a way to do it along a gradient to achieve the effect I want?

Answer 1

ColorRect only displays one color so you'll have to use a shader for this. You will have one input: the amount you want to wipe (between 0 and 1). This should work:

shader_type canvas_item;

uniform float amount : hint_range(0, 1) = 0.0;

void fragment() {
    COLOR.a = max(0.0, min(1.0, 1.0 - amount + UV.x - mix(0.0, 1.0, amount)));
}

You can test it by moving the amount slider in the Inspector. Then you can animate that property using AnimationPlayer.

You can obviously get a lot fancier with, but this is a plain linear wipe effect.