Jump to content
GreenSock

themepunch

Shakey Animation without Perspective, Idea ?

Recommended Posts

Hi Guys ! Hope you are all alright nowdays !   

 

I made for you two example.

1st is a simple css scale animation you can see here (smooth Scale animation): 

See the Pen YzyRqdv by themepunch (@themepunch) on CodePen

 

The 2nd example is animated with gsap which you can see here:

 

The animation with gsap looks only good if i set any perspective on wrapper container. (which i dont want to since text gets blurry, and also isometric sessions can not be build).   However i added a button to see the difference with and without perspective.

 

We had a similar issue earlier where images get shaky in new gsap engine on scale animations. You fixed it by rounding divisions on a deeper subvalue.
(Maybe you can remember on my PanZoom issue).     Not sure if the things have to do anything with each other, thought maybe i can note it.

 

Anyway, it would be fantastic if you could give me a solution why things so jittery / shaky with gsap scale animation. 

Thanks a lot for your help and hope you can help me with this ! 

 

Cheers,

 

Krisztian from ThemePunch

 

 

See the Pen dyYQGLO by themepunch (@themepunch) on CodePen

Link to comment
Share on other sites

Hey Krisztian. What browsers are you seeing the shakiness in? I'm not seeing anything, but maybe that's just my eyes not being great :) 

 

Sounds like rendering error, especially if adding perspective fixes it. You could try other fixes like adding force3D: true or adding will-change: transform to the element.

  • Like 1
Link to comment
Share on other sites

I see the slight "shakiness" you're talking about and it has nothing to do with GSAP from what I can tell - like @ZachSaucier said, the browser is choosing to apply a certain kind of antialiasing algorithm that doesn't look very good. I've seen Chrome do this several times in the past. Really bad. 

 

It looks like you can "fix" it by setting willChange: "transform" (or in your css, will-change: transform). What's odd is that using a 3D transform used to cause the browser to use the same kind of rendering algorithm as will-change: transform but apparently they changed that. 🙄

  • Like 1
Link to comment
Share on other sites

By the way, I noticed your CodePen uses a pretty old version of GSAP 3 - I'd recommend updating when you have a chance. 

  • Like 1
Link to comment
Share on other sites

Hi Jack,

 

Thank you for your answer ! I tested this with different GreenSock versions and i forget  to put to the latest version in my example. Unfortunately the latest version available at your site is shows the same issue. 

 

I tried with force3d which did not help (or at least i could not fix with it) neither the willChange "transform" did the trick for me. 

The only solution i could find so far is to add any perspective to the parent container.  Which is not possible if customers want to use isometric rotations (where still no gpu used to render :()  .   Small smooth animations with scales get extrem jittery, which is for us a big problem right now.

 

i would be thankful for  any further ideas, tips, hints ?

 

Thank you for your patience,

 

Krisztian

Link to comment
Share on other sites

Just to be clear, this isn't a GSAP thing. This is a browser rendering algorithm thing. 

 

Are you saying will-change: transform did NOT work for you? What browser/OS? 

Link to comment
Share on other sites

Yeah, i understand you with gsap. Sorry to put it on the wrong path.   I really appreciate your help and effort here ! 

The willChange:transform fix for chrome on Mac and PC but still jittery on Firefox 76.0.1 Windows 8.1 i.e. 

 

Just changed it here: 

See the Pen dyYQGLO by themepunch (@themepunch) on CodePen

 

I think i will check if the customer(s)  use any rotation or perspective in their current ainimation step, and if not, i put a perspective on it during animation and remove it afterwards. That will do a trick for all browsers.

 

Thank you again for your patience and feedback. Cheers  

 

Krisztian

 

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