UI animation not working as expected.

I am trying to make an image slide out from under another image using animation in the UI. I have minimally reproduced the problem which you can download here.

There is a GameObject ‘PointerOverTarget’ with an attached script of the same name. The script uses ‘IPointerEnterHandler’ to enable then play an animation on the object ‘Slider’. The animator component on the GameObject ‘Slider’ is disabled.

When I enable the animator component, ‘Slider’ slides out when the project is run. When I disable the animator component then run the project and mouse-over ‘PointerOverTarget’ the blue bar slides across the bottom of ‘SlideOut’ in the Animator window but ‘Slider’ doesn’t animate as expected.

I notice in the inspector that I can change the Pos X,Y,Z values of ‘Slider’ before mouseing-over ‘PointerOverTarget’ but Pos Y becomes locked afterwards - when I click and drag the red ‘Slider’ box I can only move it horizontally.

After some fiddling, here is my workaround: -

  • Create an empty state in the Animator window ;
  • right-click on it to ‘Set as Layer Default State’;
  • enable the Animator component on ‘Slider’;
  • Remove the script line
    anim.enabled = true;