Jump to content


Safari Transform Origin & Scaling Blues

Recommended Posts

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' });
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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 });
  • Like 1
Link to comment
Share on other sites

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 ;)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.