Scale based on specific origin about anime HOT 12 CLOSED

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

from anime.

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

from anime.

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

from anime.

@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.

from anime.

@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

from anime.

@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.

from anime.

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.

from anime.

@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.

from anime.

@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/

from anime.

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

from anime.

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

from anime.

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

from anime.