Jquery - choppy animation 1313 Responses

Last post: 1 year, 1 month ago | Thread started: Apr 15, 12, 9:14 a.m.

RespondNew TopicDisable Images

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

  Apr 15, 12, 9:14 a.m. – Permalink

• fyoucher1

  $("anim").image ( { bitmapSmoothing: true } );

  • That was a joke– fyoucher1

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 15, 12, 9:21 a.m. – Permalink

• mikotondria3

  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 ?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 15, 12, 10:43 a.m. – Permalink

• NONEIS

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

  • <this, it's all about run time– i_was

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 15, 12, 2:38 p.m. – Permalink

• monNom

  Try splitting large images into tiles or stripes, animate individually.

  Not sure why it works, but it does.

  • erm,, thats for jerky animation. not sure if it helps in your case.– monNom

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 15, 12, 11:55 p.m. – Permalink

• fadein11

  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 browsers– animatedgif1/2

    chrome, safari, firefox... and its a new 27inch imac– fadein112/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 1:38 a.m. – Permalink

• nosaj

  It seems to happen mostly when I animate width and height. The problem occurs with the pixels shifting and distorting the jpeg throughout the image.

  • < Oh and only in certain browsers such as Safari Mac.– nosaj

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 4:22 a.m. – Permalink

• animatedgif

  would be easier to help you if you put together a demo of the problem out of context

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 4:27 a.m. – Permalink

• nosaj

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

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 4:34 a.m. – Permalink

• nosaj

  This is the discussion around the the link above:
  http://stackoverflow.com/questio…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 4:35 a.m. – Permalink

• animatedgif

  ^ 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…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 4:42 a.m. – Permalink

• animatedgif

  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.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 4:45 a.m. – Permalink

• nosaj

  Thanks animated gif - "-webkit-transform-style: preserve-3d" helped on my end also.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 6:01 a.m. – Permalink

• ernexbcn

  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:

  http://playground.benbarnett.net…

  • ooh, thanks ernex.
    This doesn't webkit-ise output, does it?– detritus1/2

    awful in chrome– fadein112/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earApr 16, 12, 6:20 a.m. – Permalink