Odd effects with transformOrigin property

When animating some basic div shape, modifying the transformOrigin property in anime.js causes a different animation than animating the transform-origin property in the CSS file.

To observe the issue:

• Watch the animation in the codepen
• Uncomment line 3 in the javascript and watch the animation
• Recomment the javascript line and uncomment the transform-origin property in the CSS, observe correct animation

https://codepen.io/supermandrew/pen/pWxyBJ

Any ideas why they’re different?

EDIT: Additionally, it appears that words such as ‘left’, ‘center’, etc are not supported in anime.js transformOrigin. For instance, using this for line 3 causes the animation to stop: transformOrigin: 'left center',

[juliangarnier]

It’s because you’re animating the transformOrigin property. From the default value to ‘0px 50px’. If you want to define a property, but not animating it, you should simply set it in CSS. But if you really want to use anime() to set the transformOrigin property you can define the initial and end value to be the same, like this:

transformOrigin: ['0px 50px', '0px 50px']

[cedeber]

You need to give the three-value syntax:

{ transformOrigin: "50px 50px 0"}