Issue with transform origin on a path

[Michaël Garcia]

I've an svg made of simple paths. 

I want to scale up each path individually, based on their own centers. I'm really struggling to preserve the transform-box: fill-box css property.  I also tried to set the transform-origin with GSAP directly but it doesn't change a thing.

I tried to animate those paths with a simple css animation and it works correctly. Does anyone know what I'm missing with my tween ? 

Thank you very much

See the Pen gOKOaRJ by michaelgrc (@michaelgrc) on CodePen

[GreenSock]

This is part of the reason why you should always set transform-related values directly through GSAP. It's faster and more accurate. In your demo, you're doing it only in the CSS. Various browsers report the values in odd ways and always in pixels, so it's tricky to decipher (often impossible actually).

 

Is this what you wanted?: 

See the Pen zYaYqqx by GreenSock (@GreenSock) on CodePen

[Michaël Garcia]

Thanks for your explanations. I actually managed to get the result I wanted buy setting the transformOrigin before my tween :

Have a nice day!

 

gsap.set('svg path',{
  scale:0.8,
  transformOrigin:'center center'
})

gsap.to('svg path',{
  scale:1,
  stagger:0.07,
  duration:1
})