Child Image of Animated Panel Shaking

I am currently working on an UI for a mobile game. One feature I have implemented is a “Help” panel that slides into view at the bottom of the screen as they bounce between screens. An example of this is on the password input screen, the panel slides into view with a header that says “Input Your Password” in bold, with a body that says “Use the on-screen keyboard to input your password.”

I have made some small graphics that serve as highlights and dividers for my text, and in this case, I’d like to use a small divider under the header for my panel. It looks great, until I start the animation to slide the panel into view. The panel and the text slide in synchronously, but for some reason, the divider image shakes wildly as it slides into frame with the rest of the panel.

My current hierarchy is as follows:

Canvas

— Panel_Help w/ Animator Component

— — Txt_Header

— — Txt_Body

— — Img_Divider <== Object that shakes

The image is a simple Rect-Transform anchored to the middle of the panel, offset on the Y-axis in order to underline the header-text, scaled up five times to increase visibility. It is a filled image with aspect preservation enabled. I tried making the Divider a child of the header, but that didn’t change anything.

Animation and graphics aren’t really my background, so explain things to me as if I’m a child, or maybe the child’s dog.

Thanks!

Answer the problem myself:

The Rect Transform for the Img_Divider object was scaled by five instead of just multiplying the Width and Height values by five. My wild shot in the dark for the reason is that there’s a conflict between the scale feature and the floating point values for position during animation.