Fading in and out triggered canvases

Hi everyone,
In my scene I have a canvas with an image. This canvas is being triggered by canvas trigger object “basically an empty gameobject with a collider”.
My code looks like this.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class CanvasTrigger : MonoBehaviour {

	void Start () {
		myCanvas.enabled = false;
		myPanel.GetComponent<CanvasRenderer> ().SetAlpha (0.5f);
	}
	
	public Canvas myCanvas;
	public Image myPanel;

	void OnTriggerEnter(){
		myCanvas.enabled = true;
		myPanel.CrossFadeAlpha (1f, 5f, false);

	}

	void OnTriggerExit(){
		myCanvas.enabled = false;
	}

}

When I enter the trigger the canvas appears but without the fading effect. Also I have tried attaching a different code to the canvas trigger like this:

using UnityEngine;
using System.Collections;

public class CanvasTrigger : MonoBehaviour {

    	void Start () {
    		myCanvas.enabled = false;
    
    	}
    	
    	public Canvas myCanvas;
    
    	void OnTriggerEnter(){
    		myCanvas.enabled = true;
    
    	}
    
    	void OnTriggerExit(){
    		myCanvas.enabled = false;
    	}
    
    }

And then attach a different script to the image component of my canvas like this:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class ImageFade : MonoBehaviour {

		public Image myPanel;

		void Start() {
		myPanel.GetComponent<CanvasRenderer> ().SetAlpha (0f);
	}
	void FixedUpdate(){
			myPanel.CrossFadeAlpha (1f, 20f, false);
		}


}

But niether ways are working. It is getting a bit frustrating.

Any help much appreciated. Thanks.

I wrote this not long ago for fading elements within a canvas, it works on individual maskable graphics, which should work just fine. I use it by placing it on individual elements, such as text, image, etc., and then getting the FadeColor component from whatever object needs it and then calling the FadeIn() or FadeOut(). I have tried to keep it generic, so it should work for you, but if not the coroutine is handling the fade and if nothing else that should help you. This script is also set up to handle partial fades (such as only half fading out before being told to fade in again). Lastly, there is an OnFadeComplete event for any objects interested in subscribing. I will attach the script and a sample use of it.

using UnityEngine;
using UnityEngine.UI;
using System;
using System.Collections;

public class FadeColor : MonoBehaviour
{
    public event Action OnFadeComplete;           //This is called when the fade in or out has finished.

    public MaskableGraphic _FadeGraphic;

    public Color _StartColor = Color.white;
    public Color _FadeInColor;
    public Color _FadeOutColor;

    public float _FadeInDuration = 2.0f;
    public float _FadeOutDuration = 1.0f;
    public float _FadeInitialDelay = 1.0f;

    private IEnumerator mFadeCoroutine = null;
    private Color mCurrentFadeColor;

    private bool mIsFading = false;
    public bool pIsFading
    {
        get
        {
            return mIsFading;
        }
    }

    private void Start()
    {
        if(_FadeGraphic == null)
        {
            Debug.LogError("FadeColor component on object " + gameObject.name + " has no Fade Graphic assigned!");
            return;
        }

        _FadeGraphic.color = _StartColor;
        mCurrentFadeColor = _FadeGraphic.color;
    }

    public void FadeOut()
    {
        if(mFadeCoroutine != null)
            StopCoroutine(mFadeCoroutine);

        mFadeCoroutine = RunFade(mCurrentFadeColor, _FadeOutColor, _FadeOutDuration, false);

        StartCoroutine(mFadeCoroutine);
    }

    public void FadeIn()
    {
        if(mFadeCoroutine != null)
            StopCoroutine(mFadeCoroutine);

        mFadeCoroutine = RunFade(mCurrentFadeColor, _FadeInColor, _FadeInDuration, true);
        StartCoroutine(mFadeCoroutine);
    }

    private IEnumerator RunFade(Color startColor, Color endColor, float duration, bool isFadeIn)
    {
        float timer = 0.0f;
        mIsFading = true;

        if(isFadeIn && _FadeInitialDelay > 0)
        {
            while(timer < _FadeInitialDelay)
            {
                timer += Time.deltaTime;
                yield return null;
            }
        }

        timer = 0.0f;

        if(_FadeGraphic != null)
        {
            while(timer <= duration)
            {
                _FadeGraphic.color = Color.Lerp(startColor, endColor, timer / duration);
                mCurrentFadeColor = _FadeGraphic.color;

                timer += Time.deltaTime;
                yield return null;
            }

            _FadeGraphic.color = endColor;

            mCurrentFadeColor = _FadeGraphic.color;
            mIsFading = false;

            // If anything is subscribed to OnFadeComplete call it.
            if(OnFadeComplete != null)
                OnFadeComplete();
        }
        else
            Debug.LogError("FadeColor component on object " + gameObject.name + " has no Fade Graphic assigned!");

        mFadeCoroutine = null;
    }
}

How to use:

void OnTriggerEnter()
    {
            if(_FadeGraphic != null)
                _FadeGraphic.FadeIn();
    }