Jump to content
Search Community

Safari Transform Origin & Scaling Blues

GRAY GHOST test
Moderator Tag

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

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.
×
×
  • Create New...