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.