ururk

Have you tried playing around with the speed of the transition and the framerate? I found that going to a small number (.4) versus a 'large' number (1.5) improved the appearance of jerkiness, along with dropping the framerate to 30. This would reduce the number of redraws the browser does (correct?), and the faster speed gives less time for the jerkiness to be noticeable. Even with those tweaks... I'm on the fence about sliding large panels of content (even after doing this myself just recently). I've seen other sites that do this - one that manipulates a container (and times it was jerky), and another that I *think* scrolls the actual page left to right, and frankly, I think the key to a smooth side-scrolling page is to scroll the actual page and not the div's. This might not work if you are trying to animate an element... but it could work if you are performing a scroll action on the body. Container style: http://www.elegantthemes.com/demo/?theme=Sky Body-style Scroll (no JS needed, but this one is enhanced with JS): http://imakewebthings.com/jquery-waypoints/

Oh, also, I'm not 100% happy with how the lid animates, but I think it is as close as I can get it without drawing more frames. The trouble is the thread is very coarse, and only requires 1.5 turns to remove it.

I'm trying to figure out if this is an issue with webkit, GSAP, or how short my animations are: (trigger play() with mouseover, reverse() with mouseout) Broken in Webkit (Safari/Chrome), but OK in Firefox (tested on Safari, Mobile Safari, multiple devices): http://www-personal.umich.edu/~jparisea/pb/anim/ In Safari if you watch the animation above till it stops, then move the mouse away, when it plays in reverse, the lid of the bottle does not animate properly. As I was driving home today I thought about putting the background sprite on a div inside the div being rotated, and it seems to have fixed the issue: http://www-personal.umich.edu/~jparisea/pb/anim/index_works.html I guess my only real question is: Because of how short my animations are, and how they overlap, am I misusing TimelineMax, or is this a webkit bug - rotation}+background image position? I don't like this solution as it requires yet another div... but it seems to have actually improved how "smooth" the animation plays. Thanks! John