Creating a fading UI in cut scenes with Timeline

After finishing the shots for the Level complete cut scene (here), we want to show a fading image with a text image and some buttons

Creating the fading UI

• While LevelComplete_Cutscene selected, create a new Canvas
• Set its UI scale mode to Scale with screen size
• Create a new image and rename it as Camera fade
• Set its Rect transform values as shown below and choose a color

• Drag and drop the Camera fade game object into the Timeline. Select Add animation track
• Start recording and configure its Alpha to fade the image as desired. Later, stop recording

Adding congratulations text and buttons

• Add one image, 2 buttons and rename them
• Remove the text in both buttons

• Set their values as shown below

Creating the UI’s animation

• Select the canvas. Drag and drop into the Timeline. Select Add animation track
• Place the time line in a time, for instance, 5:30
• Start recording
• Select the Congrat_image, Restart_button and Quit_button.
• Set its Alpha value to 0
• Move the time line to the end of the whole tracks
• Set the Alpha value to 255
• Stop recording

Preview the result in Timeline

Hope this blog is helpful for you!