Skip to main content

Jquery - choppy animation 1313 Responses

Last post: 2 years, 8 months 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 } );

    + add note

    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 ?

    next note >add note

    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 timei_was
    + add note

    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
    + add note

    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 browsersanimatedgif1/2
      chrome, safari, firefox... and its a new 27inch imacfadein112/2
    next note >+ add note

    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
    + add note

    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

    next note >add note

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

    next note >add note

    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…

    next note >add note

    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…

    next note >add note

    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.

    next note >add note

    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.

    next note >add note

    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 chromefadein112/2
    next note >+ add note

    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

Login or Register to respond to this

Skip to main content