Scale based on specific origin

[mkermani144]

Is there any way to set origin of the scale? If there isn't, is it intended to add such a feature to this library?

[alexchantastic]

Can you use the transform-origin CSS property (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) to accomplish this?

[oscarotero]

Transforms on SVG elements are a bit painfull in IE You can see an explanation here: https://css-tricks.com/transforms-on-svg-elements/

[mkermani144]

@oscarotero Thanks for your reply, but the concept of this issue is neither about SVGs nor about IE. I only want to scale some <img> or <div> elements in Firefox or Chrome.

[oscarotero]

@mkermani144 Ok, so transform-origin is your solution. Anyway, I'd love to have a cross-browser way working with html and svg elements like GSAP

[mkermani144]

@alexchantastic @oscarotero No, transform-origin doesn't work for me. Look at this code: http://codepen.io/mkermani144/full/NAVQpO/ . However transform-origin is set to the center of the page for each rectangle, after clicking they don't use the specified origin.

[oscarotero]

transform-origin is relative to the element you want to transform. By default is center center or 50% 50%, so it's relative to the centered point of the element. I'd use translate in addition to scale, to move the element to the center of the window after scale it.

[mkermani144]

@oscarotero Yes, I know transform-origin is at the center of element by default. I even set it to be at the center of the element for certainty, but the problem still exists.

[juliangarnier]

You can animate the transform-origin property like any other css properties:

Like this:

anime({
  targets: 'div',
  transformOrigin: ['0px 0px', '100px 50px']
});

And a running demo here: http://codepen.io/juliangarnier/pen/WxWaWE

[mkermani144]

@juliangarnier I don't want to animate transform-origin. I have a div element somewhere in the page. I use anime's translates to move that div to the center of the page. I also want to scale that div when it is at the center of the page and with transform-origin set to center of the page too. But as I mentioned, the behavior of scale is unexpected. http://codepen.io/mkermani144/full/Pzgpbx/

[juliangarnier]

Sorry but that looks more like a CSS problem than a bug related to the library.

[mkermani144]

I found the problem. The order of anime's argument attributes matters. For more info, see #63.

[juliangarnier]

Yes and like I said in #63, this is the expected behaviour of CSS transforms. But i'm glad that you found the problem!