Jump to content
GreenSock

GRAY GHOST

Safari Transform Origin & Scaling Blues

Go to solution Solved by GRAY GHOST,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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