Anime: Odd effects with transformOrigin property

[supermandrew]

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',

[supermandrew]

Okay, after a bit more testing, it seems like animejs 2.0.0 (included in the codepen) has the weird effect with transformOrigin, and animejs 2.2.0 has _no_ effect with transformOrigin.

However, I'm assuming animejs should still be able to modify transformOrigin correctly, no?

[HauntedSmores]

@supermandrew You probably cant animate keywords. Convert those to numerical units like 50% 50% instead of center center or whatever.

Edit: Checked your codepen and see you did use percentages there, but it looks like its working to me.

[cedeber]

You need to give the three-value syntax:

{ transformOrigin: "50px 50px 0"}

[juliangarnier]

Both @HauntedSmores and @cedeber are right, you can't use 'center center',
and if no initial values are specified, I recommend using the full three-value syntax '50px 50px 0px'.

[supermandrew]

@juliangarnier I still think I'm missing something here. I've modified the codepen to instead of using %'s, to use px, but the issue still persists.

Using: transform-origin: 0px 50px; in CSS causes a different behavior than transformOrigin: '0px 50px', in animejs.

I've also tried with using the full three-value syntax, and still having no luck (seems to work in CSS, not animejs though).

I'll try and post some gifs of what I'm seeing when I get a chance if that helps.

[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']

[supermandrew]

Totally didn't realize that, you're absolutely correct. Thanks for the help!