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