Ui Button going in and out

How do I fix this?

So I have an animation the plays where the button gets smaller when it is highlighted. But since it changes the size, if you put the cursor on the side, it goes in this loop where you hover over it, it gets smaller, but now its small enough that your mouse is off of it, so it goes back to full size, but the cursor is on it again. So it gets smaller. It keeps going in this loop over and over again until you move the mouse. And no it isn’t because the animation is looping.

Use two different RectTransforms , one for the mouse enter/leave event detection and another for the animation.
Something like the image below where the black border is the mouse event one , and the red border is the one you animate

Oh Ok! I see now. So the solution is:

  1. Make a button in the canvas.
  2. Select the button set the Button component’s Transition to Animation.
  3. Then click “Auto Generate Animation”
  4. Decide what size you want it to change to
  5. Remove the Canvas Renderer and Image components. (Make sure to remove Image first)
  6. Add a new GameObject inside the button and add the components from step 5 into it, and have no others except for Rect Transform, and change the Source Image to UISprite, or whatever sprite you are using.
  7. In the parent button’s animation, make it change the child GameObject’s size.

Here are the steps in photos.

Step 1:

Step 2:

Step 3: Just press the Auto Generate Animation button

Step 4: Decide

Step 5:

Step 6:

Step 7:

It doesn’t work. It gives me an error that says “The component RectTransform can’t be added because Button already contains the same component”.