Jump to content
Search Community

Micro jumps (antialiasing) at the end of tweens

danissimo test
Moderator Tag

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

Here's my example:

http://artquest.ru/temp/avon/container.html (sorry for non-Codepen, learning it yet)

 

Notice the 1px jump at the end of the text animations (Chrome, FF), also note the antialiasing change (and similar jump) of all the text after "big V" animation starts (most noticeable in FF). Additionally there is a barely visible pulsing of the middle petal lower border.

I think it's all antialiasing problems. Is there any method to avoid it?

If pure css animation is used there's no such problems.

Link to comment
Share on other sites

Hello,

 

Those flickering problems can usually be solved by doing a GPU render using 3d properties on elements (translateZ(0), perspective...).

 

I have added this CSS code and now it looks pretty fine:

#banner ,
#banner *{ 
backface-visibility: hidden; /* Chrome */
filter: grayscale(0%); /* FF */
}

In your case i had to add a filter property for Firefox, i don't know why. Maybe the blur filter you use is the cause of the problem.

Of course this is not a good method to use the universal selector, this code is just a test I've done fastly.

Moreover maybe you could use the GSAP force3D property in your JavaScript code instead of CSS.

 

See the Pen oBRKEo by classikd (@classikd) on CodePen

  • Like 2
Link to comment
Share on other sites

Thank you, Classikd,

 

things get really better in FF, but in Chrome and Opera the flickering remains. I tried both css and js approach:

CSS: backface-visibility: hidden, transform: translateZ(0);
JS: force3D:true, z:0.01

And if I get it right enabling 3d properties increases CPU usage which is vital for banners.

 

Updated Codepen:

See the Pen NdVebJ by eliio (@eliio) on CodePen

Link to comment
Share on other sites

  • 2 weeks later...

Sorry for the late reply.

Even with Linear Ease there is jitter (and sometimes trash pixels) in animation in Chrome.

Here's the video: https://youtu.be/EDjYEzBNHNk

And here is the updated (simplified) pen:

See the Pen NdVebJ by eliio (@eliio) on CodePen

 

I've checked other topics and found this is a long story bug in Chrome.

https://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4

Link to comment
Share on other sites

To add to the great advice of ohem :)

 

Sometimes to get rid of that Chrome flicker bug you can try adding the below to the parent of the child element that is using a transform:

.add-to-the-parent-of-a-transformed-child {
   -webkit-transform: translateZ(0);
   -webkit-font-smoothing: antialiased;
}

It places the transformed childs parent on to a new rendering layer along with its child, so Chrome doesn't flicker.

 

You want to use -webkit- prefix for the transform property to help with previous and new versions of Chrome.

 

:)

  • Like 4
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...