Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
danissimo

Micro jumps (antialiasing) at the end of tweens

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

Hi Danissimo,

 

a Codepen is really helpful and so easy.

 

I assume that the easing might be a problem (jumping at the end).

 

Here an example with "ease: Power0.easeNone": 

See the Pen YNbjOZ?editors=1010 by mikeK (@mikeK) on CodePen

 

Kind regards from Hamburg

Manfred

Link to comment
Share on other sites

Here's the Codepen (yeah, easy and fun 😀)

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

 

Plane ease is so unnatural in most cases. I think these jumps are because of svg, will try to change them to bitmaps.

And I suppose these antialiasing problems are due browser rendering. Is there any way to change these settings from script?

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

I looked at this codepen and there is no longer flickering for me (FF, Chrome, Opera).

I think you believe the flickering problems remain because of the ease you use, try using a linear one.

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

I think this is smoother: 

See the Pen wJKvrN by anon (@anon) on CodePen

 

I used force3D false instead of true, and added a slight rotation to the tweens.

 

 

It actually seems smoother without this part on my end:

#banner, #banner * { 
	backface-visibility: hidden;
	filter: grayscale(0%);
	transform: translateZ(0%);
}
  • Like 6
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

ohem:

Yep, that's much better, thank you.

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