Why does transformOrigin not work?

[AlexanderGS 3 Likes (Newbie)]

The line animation starts on the left side, then I specified transformOrigin to make the line go to the right side at the end. But this doesn't happen.  Please tell me where I went wrong.

See the Pen LYBwgKL by Alexxxsander (@Alexxxsander) on CodePen

[Carl 11,326 Likes (Superhero)]

Thanks for the demo. 

transformOrigin only applies to transforms like x, y, rotation, skew, scale.

 

width and height are not transforms

 

for what you want to do I suggest using scaleX.

 

I wasn't sure where you want the line to start and end, but hopefully this demo points you in the right direction.

feel free to play with the values.

 

See the Pen WNKVYGV?editors=1010 by snorkltv (@snorkltv) on CodePen

[AlexanderGS 3 Likes (Newbie)]

58 minutes ago, Carl said:

Thanks for the demo. 

transformOrigin only applies to transforms like x, y, rotation, skew, scale.

 

width and height are not transforms

 

for what you want to do I suggest using scaleX.

 

I wasn't sure where you want the line to start and end, but hopefully this demo points you in the right direction.

feel free to play with the values.

 

 

 

Explained how it works, and even showed an example.😮 Thank you for your help!😄