How to Animate Materials

If you are more of a visual learner there’s also a video tutorial:

The custom material inspector properties can be animated through the Animation window as any other Unity component.

Please keep in mind that UI material properties can’t be animated using the Animator, the reason being that Unity won’t allow you to animate shared material properties. Unity UI Images materials are always shared, which means that all Images use the exact same material instance of a particular Image and therefore if a property is changed for one Image material all the other Images that share material will change too. Since Unity won’t allow this behaviour it doesn’t support using the Animator in UI Material properties. And unfortunately I can’t do anything about it.

I recommend using an amazing free asset in the store called DoTween to animate the UI material properties through code or if you prefer you can use the function calls described in the following section.

Also consider that since UI material instances are shared you may want to create a copy of each material through script on an Awake method (AllIn1GraphicMaterialDuplicate.cs):

private void Awake()
{
        Graphic graphic = GetComponent<Graphic>();
        graphic.material = new Material(graphic.material);
}