Safari Transform Origin & Scaling Blues

[GRAY GHOST 11 Likes (Newbie)]

I've got this scene where a scale and transform-origin are being used together. On Safari the effect never takes places and I know of a hacky way to fix this, but wondering what a better solution would be? Here is the code I'm discussing.

tl.to(worm, 1, { scale: 1, transformOrigin: 'bottom center' });

[GreenSock 8,117 Likes (Superhero)]

Seemed to work great for me. I just tried in Safari. I'm on a mac. Very tough to troubleshoot blind, though. Got a reduced test case demo in codepen we could look at? 

 

I noticed you're scaling to "1" which is the normal/default scale. So maybe that's why it looks like nothing is happening? What value is it starting at when you call that tween? 

[GRAY GHOST 11 Likes (Newbie)]

Hey Jack,

 

I found my issue. I was setting transform: scale(0) in CSS when I should be using a different approach.

 

To explain: I was scaling down in my CSS to alleviate the flash of the graphic when the browser initially loads, but I fixed my concern by using this approach:

#svg-target {
  visibility: hidden;
}

TweenMax.set(svg_target, {
  scale: 0,
  transformOrigin: 'bottom center',
  visibility: 'visible'
});

TweenMax.to(svg_target, 1, { scale: 1 });

[GreenSock 8,117 Likes (Superhero)]

Perfect. Yeah, that solution is much better because it also ensures that it works in IE (which would ignore your CSS transform for SVG elements). Setting it through GSAP protects you