Share Posted October 16, 2015 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 More sharing options...
Share Posted October 16, 2015 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 More sharing options...
Author Share Posted October 16, 2015 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 }); 1 Link to comment Share on other sites More sharing options...
Share Posted October 16, 2015 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now