Scale animation on the x axis grows from center, even though div is justified left

I’m trying to create a hover animation that involves two divs that act as dividing lines. On hover. I want one, slightly taller div line to animate from the left (grow from scale 0 to scale 100). I’m basically copying the projects list layout from this portfolio and he has the animation I’m trying to replicate.

I’ve got both the thin and slightly thicker line contained in another flex div set to align left, and when I change the width in the editor, it grows from left to right.

However, when I try to set up an animation where it grows on the x axis, it animates from the center. I’ve tried justifying and aligning left all my elements, from the container to the section, yet the animation still plays from the center.

I’ve included a public share link Would HEAVILY appreciate any tips I’m struggling over here.

I’m also noticing a separate issue where even though the initial state is set to scale 0, it loads in at scale 100% and you have to trigger the hover out animation before it will scale to 0.

See screen grab below. Try setting your point of origin for the element in the style panel. This can be located under the 2D & 3D Transform panel. Click on the three little dots to access.

For the load issue. Try setting the width scale property to “0”.

AYYY fixed the first problem. Absolute legend. For some reason setting the width scale to 0 in transform settings looks good in the designer, but still messes up on the live site. Might have to play around with my animation, but thanks so much for the help!

edit: fixed the animation too, had some initial states in there for the hover and they weren’t needed

Awesome. I’m on an iPad so I couldn’t test out the hover but I remember running into this problem before.

1 Like

I ran into it in like 2019 and that old project is long gone. You saved me a few hours for sure!