Timeline (Unity 2017b5) Fade sample

Bind.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Linq;
using UnityEngine.Playables;

// bind canvas group on runtime.

public class Bind : MonoBehaviour
{
	[SerializeField] CanvasGroup canvasGroup;

	void Start ()
	{
		var director = GetComponent<PlayableDirector> ();
		var fadeTrack = director.playableAsset.outputs.First (c => c.streamName == "Fade Track");
		director.SetGenericBinding (fadeTrack.sourceObject, canvasGroup);

		director.Play ();
	}
}

FadeAsset.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;

namespace Timeline.Sample
{
	[System.Serializable]
	public class FadeAsset : PlayableAsset,  ITimelineClipAsset
	{
		public FadePlayableBehaviour.FadeType fadeType;

		public CanvasGroup canvasGroup{ get; set; }

		public override Playable CreatePlayable (PlayableGraph graph, GameObject go)
		{
			var playable = ScriptPlayable<FadePlayableBehaviour>.Create (graph);
			playable.GetBehaviour ().fadeType = fadeType;

			return playable;
		}

		public ClipCaps clipCaps {
			get {
				return ClipCaps.None;
			}
		}
	}
}

FadePlayableBehaviour.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;

namespace Timeline.Sample
{
	public class FadePlayableBehaviour : PlayableBehaviour
	{
		public CanvasGroup canvasGroup;
		public FadeType fadeType;

		public enum FadeType
		{
			Fadein,
			Fadeout
		}

		public override void OnGraphStart (Playable playable)
		{
			canvasGroup.alpha = 0;
		}

		public override void OnBehaviourPlay (Playable playable, FrameData info)
		{
			canvasGroup.alpha = fadeType == FadeType.Fadeout ? 0 : 1;
		}

		public override void OnBehaviourPause (Playable playable, FrameData info)
		{
			#if UNITY_EDITOR

			var progressRate = playable.GetTime () / playable.GetDuration ();
			if (progressRate < 0.5f) {
				canvasGroup.alpha = fadeType == FadeType.Fadeout ? 0 : 1;
			} else {
				canvasGroup.alpha = fadeType == FadeType.Fadeout ? 1 : 0;
			}
			#else
		canvasGroup.alpha = fadeType == FadeType.Fadein ? 1 : 0;
			#endif
		}

		public override void PrepareFrame (Playable playable, FrameData info)
		{
			var progressRate = playable.GetTime () / playable.GetDuration ();
			canvasGroup.alpha = fadeType == FadeType.Fadeout ? (float)progressRate : (float)(1 - progressRate);
		}
	}
}

FadeTrack.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Timeline;
using UnityEngine.Playables;

namespace Timeline.Sample
{
	[System.Serializable]
	[TrackMediaType (TimelineAsset.MediaType.Script)]
	[TrackClipType (typeof(FadeAsset))]
	[TrackBindingType (typeof(CanvasGroup))]
	[TrackColor (0.2f, 1f, 0)]
	public class FadeTrack : TrackAsset
	{
		protected override Playable CreatePlayable (PlayableGraph graph, GameObject go, TimelineClip clip)
		{
			var mixer = ScriptPlayable<FadePlayableBehaviour>.Create (graph);

			var content = go.GetComponent<PlayableDirector> ();
			var canvasGroup = content.GetGenericBinding (this) as CanvasGroup;
			var fadeAsset = clip.asset as FadeAsset;
			mixer.GetBehaviour ().canvasGroup = canvasGroup;
			mixer.GetBehaviour ().fadeType = fadeAsset.fadeType;

			clip.displayName = fadeAsset.fadeType.ToString ();
			return mixer;
		}
	}
}