Making Images Fade In and Out

Basically, I’m working with code that changes a variable to set what image is being displayed based on a certain prompt.

That’s working fine, but I want to make it so that, when I switch to a new image, the old image fades out and the new image fades in.

But I don’t know where to start. How do I make stuff fade in and fade out?

There are two ways I can think of doing that. The first one, you’ll do it manually. The other one, which I would recommend, would be using iTween (download here), and setting the alpha value of the images using iTween.ValueTo. There goes an example:

class FadeMaterials : MonoBehaviour {

    public void FadeOut() {

        iTween.ValueTo(gameObject, iTween.Hash(
            "from", 1.0f, "to", 0.0f,
            "time", 3f, "easetype", "linear",
            "onupdate", "setAlpha");


    public void FadeIn() {

        iTween.ValueTo(gameObject, iTween.Hash(
            "from", 0f, "to", 1f,
            "time", 3f, "easetype", "linear",
            "onupdate", "setAlpha");


    public void setAlpha(float newAlpha) {

        foreach (Material mObj in renderer.materials) {

             mObj.color = new Color(
                 mObj.color.r, mObj.color.g, 
                 mObj.color.b, newAlpha);




Now, whenever you want to fade out a gameobject, just call


Obviously, to fade in another gameobject, just call:


You can change the parameter “time” on the iTween calls, to change the fading time duration. You can also change the “easetype”, to any acceptable iTween easetype values. You can find them here.

Please keep in mind that not all shaders support alpha. I’d suggest changing your materials’ shaders to their equivalents in the Transparent section. For example, if you are using a Diffuse shader, change it to Transparent/Diffuse. If you are using a VertexLit shader, change it to Transparent/VertexLit.

Also, this will only work for 3D gameobjects in your scene. If you want to fade in/out items in your GUI, it’ll be somewhat trickier, for you cannot change a texture alpha without using SetPixels (or so I think, I’m not sure).

I did not test the previous code. Just thought it’d point you in the right direction, even if theres an eventual sintax error.

Hope it helps.

You Can play with alpha value to create effect fade in fade out

Maybe this is what you’re looking for?

i found this to be helpful… it might do exactly what you are looking to do…

public var theTexture : Texture2D;
private var alpha : float = 0;
var duration: float = 1;
function Start(){
    yield FadeIn();
    yield FadeOut();
    yield NextLevel();
function FadeIn(){
var d = 0.3f / duration;
    while( alpha < 1 ){ alpha += Time.deltaTime * d; yield; }
function FadeOut(){
var d = 0.3f / duration;
    while( alpha > 0 ){ alpha -= Time.deltaTime * d; yield; }
function NextLevel(){
    yield FadeOut();
function OnGUI(){
    GUI.color = Color(1,1,1, alpha );
    GUI.DrawTexture(Rect(0,0,Screen.width, Screen.height), theTexture);

if you aren’t loading a level get rid of the next level function. This is also done in javascript.

You can use LeanTween to fade an object, here is an example:

var time:float = 2.0;
var alphaVal:float = 0.0;
LeanTween.alpha(gameObject, alphaVal, time);

Just make sure that the object has a shader that supports transparency! I would recommend Owl Labs Shaders: (Unlit with Alpha);