Jquery - choppy animation
- Started
- Last post
- 13 Responses
- nosaj
Any tips on making smooth Jquery animations?
When I apply a few animations simultaneously to an image (slide, scale and opacity). I get a fair bit of choppy pixel shifting.Is there a technique to smooth this out. It looks similar to not having "bitmap smoothing" turned on in Flash.
- fyoucher10
$("anim").image ( { bitmapSmoothing: true } );
- mikotondria30
Does it matter if you're using, say, pngs with transparency over an image background, or just a jpeg over the top of a plain css color, or anything like that ?
- NONEIS0
Not a ton you can do, browser run time still blows, this is the thing everyone who chanted for the death of flash forgets. Pull back on opacity though, it's the most processor intensive thing you can do, try moving things faster upfront and popping things in instead of fades, trick the eye...
- fadein110
Same problem here - opacity animations v.choppy.
Its worse on mac I have noticed - much smoother on Windows... weird.
It reminds me of how Flash used to run slower on mac than pc - something weird in the mac way of doing things that makes it jerky... i have no idea why though.- what browsersanimatedgif
- chrome, safari, firefox... and its a new 27inch imacfadein11
- animatedgif0
would be easier to help you if you put together a demo of the problem out of context
- nosaj0
Here's someone else's example of the same problem:
http://laveryrowe.com/Notice how the 75% becomes very distorted in some browsers (ie Safari).
- nosaj0
This is the discussion around the the link above:
http://stackoverflow.com/questio…
- animatedgif0
^ adding
"-webkit-transform-style: preserve-3d" to that element fixed it for me and made it run better too. Forces it into hardware accelerated mode I think.On modern browsers you should be using transform for these effects rather than changing the width.
http://developer.apple.com/libra…
- animatedgif0
http://lab.hakim.se/scroll-effec…
Just by looking at this page you can see this sort of thing is absolute childs play for Safari, so if it's running badly then it's been implemented wrong.
- nosaj0
Thanks animated gif - "-webkit-transform-style: preserve-3d" helped on my end also.
- ernexbcn0
This plugin converts most of the attributes that can be animated to CSS3 transitions/animations for you, using the same jQuery syntax. The speed gains are ridiculous, give it a shot: