Jump to content
Search Community

when scale - circle Pixelate / Blured

wildsol test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hello, i'm new in GSAP and i found a strange bug when try to use {scale: 60} round object

Screenshothttps://goo.gl/GgkaLt

Edgehttps://goo.gl/nm6l5G =D

 

 

Codepen: 

 

Any ideas?

 

PS: If use {width: 300, height: 300} - everithing is good

PSS: If i use css animation transform: scale(60) - everighting is good

See the Pen Boryxg by wildsol (@wildsol) on CodePen

Link to comment
Share on other sites

  • Solution

That's just a browser thing that has to do with optimizing performance by layerizing that element which essentially is like taking a screen capture of it and sending it to the GPU so that it can be rendered very quickly during animation. You can easily disable that by setting force3D:false on that tween. In your case, it would look like:

TweenMax.fromTo(btnHover, 1, {scale: 0}, {scale: 30, force3D:false});

But of course that means it won't be GPU-accelerated which is fine if you're not doing aggressive animation that bogs things down. 

  • Like 5
Link to comment
Share on other sites

  • 4 months later...

I'm gonna resurrect this thread a little here. I thought I had this figured out, but I'm trying the same thing with a bitmap image, and force3D:false isn't helping me at all. I'm wondering if it has to do with changing the image's position in x/y? Or the width? Any help would be much appreciated.

 

Here's a pen: 

See the Pen pyojoP by flysi3000 (@flysi3000) on CodePen

Link to comment
Share on other sites

This thread is about scaling an element which applies a css transform.

It seems you are tweening widht, height and backgroundSize which is very different. Force3D probably is not going to work the same way there.

 

Have you tried using scale?

 

Thanks for the response, Carl. When I use scale, it throws off the final x/y position that I want to tween the card to. Is there a better way to figure that out?

Link to comment
Share on other sites

Yes, once you adjust the scale you will probably have to adjust the x/y values if you want to align to a certain point. I'm not sure what you mean by "is there a better way to figure that out?" You will probably have to multiply the scale by the width and height  (to get measurements after scaling) and consider the transformOrigin too if you want to align with a certain point. Might take a little math and guesswork at first.

Link to comment
Share on other sites

Thanks Carl. Sorry for being unclear. Yup, that's what I was trying to get at: having to offset the x/y position after scaling the div, since it gets, in technical parlance, wonky. In the old Flash days, just making sure stuff was positioned at 0,0 went a long way towards solving these kinds of things. :-P

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