Jump to content
Search Community

Jittering / Tearing

gabrielstuff 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

Hi !

 

I'm using Chrome Version 31.0.1650.63 on OSX Maverick and I've noticed some jittering/tearing on the basic animation. 

For a fast animation you can not really notice it, but with middle slow animation such as this ones :

 

See the Pen Kajpu by GreenSock (@GreenSock) on CodePen

 

 

it is getting annoying.

 

The issue can simply show with something like : 

TweenMax.to($el, 10, {
    x: $(window).width() + $el.width(),
    onComplete: function() {
      $el.remove();
    }
});

I didn't notice it on previous beta version... and I can not say when I see it appearing on the first time. What I can say, is that I see it on Firefox (last version) and Safari (last version)

 

Thanks

Link to comment
Share on other sites

Yes, sometimes this happen and I think have nothing to do with GSAP itself, but it is a browser-rendering issue;

 

Here is an effect that I tried to do with GSAP/jQuery animations:

 

See the Pen cvdjG by bassta (@bassta) on CodePen

 

The GSAP animation works better than jQuery's one, but here is a strange thing:

 

If you click on the last item, and than the first you will see the line to expand from right to left. On two different machines ( my iMac 21", 2009 and my MacBook, late 2011, both running OSX Maverick and same version of Chrome) different things happens:
 

On my old iMac the animation is perfectly smooth and no jitter occures,

On my newer MacBook the animation have bad jitter and you can clearly see how not smooth it is. just take a look of the trembling of the right corner. 

 

If I use jQuery animate() the animation looks bad on both machines

 

It is a browser issue I guess. You can try to use force3D: true to get better performance ( don't abuse it ), but the jitter is up to browser. Also, note that the longer time animation is, the more "chopped" it looks like. 

  • Like 3
Link to comment
Share on other sites

Hey ! 

thanks for the feedback. I've been reading thru : 

 

http://css-tricks.com/tale-of-animation-performance/ and http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

Very interesting ! but i modified the examples given, and if you use larger value for width the choppyness shows up... 

 

See the Pen wBgmz by gabrielstuff (@gabrielstuff) on CodePen

 

Kind of weird that such a bug (feature) is present... feel like doing something wrong.

Link to comment
Share on other sites

It's an unfortunate thing I guess when you are animating slowly over a short distance without sub-pixel rendering.

See the Pen KAvHp by jamiejefferson (@jamiejefferson) on CodePen

shows that working with a 3D layer triggered with a tiny rotation transform. The 3D layers can sometimes be a bit tricky to achieve and even the z trick doesn't always work. And as you can see in my example, the edge of the box looks like it's pulsing - that's just one of the tradeoffs we have to live with...

 

For the most part I just suck it up and live with the jaggedness or make my tweens faster when it happens.

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