2

as stated, I have a problem with the fluidity of my page and I think jquery is in some way involved.

I created the following one-page-site.

http://cgeese.de/tests/Test02/

I use jQuery with the js plugins

Problem

Clicking a link scrolls the page to the target div with a bounce ease (supplied by easing.js). It technically works fine, but it's not smooth enough for my taste.

I think the problem with the stutter in the easing is me misusing one of these plugins but I cannot seem to find a mistake in the code.

Questions

WHY is the animation stuttering and how can I make it smoother?

Update Any clues at all? Seems like using the jQuery-build-in easing looks a bit better, but has the same issue. So I guess it's not the easing-plugin, which leaves Ariel Feslers stuff. Is there any plugin like his?

meo
  • 30,872
  • 17
  • 87
  • 123
Christian Geese
  • 495
  • 6
  • 15

1 Answers1

4

It appears pretty fluid on chrome. Changing the easing type will not change much...

Your navigation is Position: fixed, what is causing a repaint/reflow of the whole page for every navigation key frame. you can visualize this with chrome canary or with this trick: http://paulirish.com/2011/viewing-chromes-paint-cycle/

Animating the scroll also triggers a repaint. Also remove as much CSS3 shadows and gradients as you can, they are pretty hard to animate for the browser.

I think there is a plugin for firefox to.

You could optimize this my setting it position: absolute, and placing your content inside a div that is overflow hidden... (some kind of fake body)

Here is an excellent article about it: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

The other thing you could do is not animating the scroll but the elements it self, place them in a absolute positioned element, and animate this element.

Some general guidelines about repaints/reflows: https://developers.google.com/speed/articles/reflow

meo
  • 30,872
  • 17
  • 87
  • 123
  • Wow, awesome! Nailed it. Thanks a bunch! – Christian Geese Apr 12 '12 at 08:48
  • I ran into some troubles trying to do what you suggested, but cutting back on the CSS3 stuff helped alot. Animating the items instead of the scrolling is something I've done in another test project and it works fine, but I didnt have so many css3 shadows in it so it's hard to compare the methods right now. I'll do it eventually, though. Thanks again for your help! – Christian Geese Apr 12 '12 at 11:32
  • I now made a second version where the window doesn't scroll but the whole page moves "underneath". While its the same effect, its performance is even worse. But, as stated above, using less CSS3 Effects does the trick. Also, I will try if for some reason using jquery UI's "position" works better. – Christian Geese Apr 12 '12 at 14:02