Choppy animation about sidr HOT 14 CLOSED

That's because setInterval-based animation sucks, I'm sorry. Don't use jQuery's animate, use CSS3 transitions. Also, instead of animating the left of the document body, try translateX.

from sidr.

+1 for translateX, fallback requestAnimationFrame ... but don't delegate animations to jQuery.
This could also triggers a css refactoring (http://thesassway.com/beginner/the-inception-rule)...

from sidr.

+1

Choppy animation on Nexus7 chrome...

from sidr.

Not only is this very choppy, does anyone else have a problem with the way the page content is resizing? I'm getting an almost half second delay waiting on the page to render the sizes of text at a different size when the menu shows up.

I'm not sure if @artberri was going for the facebook menu effect or not, but if you look at mobile FB you'll see that the content pane simply slides to the right with no resizing of content.

from sidr.

Has anyone else tried the jquery.animate-enhanced plugin with Sidr with any success? I added jquery.animate-enhanced.min.js and it did smooth out the animation when viewed in my Xcode iPhone simulator. But when I deployed it to my iPhone 5, it made the div jump around.

from sidr.

Hi!

I'll try to implent the animations with CSS3 and to use jquery.animate only when the browsers don't support them. I'll try to finish it this weekend.

from sidr.

Agree with michaelcummings comment.

"I'm not sure if @artberri was going for the facebook menu effect or not, but if you look at mobile FB you'll see that the content pane simply slides to the right with no resizing of content."

The content/viewport resizing and shrinking of Menu button is odd.

from sidr.

Are there any progress on this issue ? / Does #30 fixes this issue?

from sidr.

< meta name="viewport" content="initial-scale=1" > fixed it for me!

from sidr.

+1

from sidr.

This should be addressed - relying on jquery for animation doesn't invoke the GPU.

from sidr.

It will be added when implementing CSS animations

#30

from sidr.

Possible workaround is to use velocityJS and point $.animate to $.velocity.. same syntax, better performance.

from sidr.

CSS transitions will be added in the next Sidr version. You can check it in the 2bc6799 commit (and the following ones).

Than you all for your support.

from sidr.