Ahh, I have the HTML collapsed most of the time and totally forgot I wasn't using a circle. Good catch! I'm still not sure why the path would have caused those artifacts and stuttering, but the circles work well.
One final question that pertains to this little test/example of mine... now that I have all these animations working. How would I sequence them? For instance, let's say I wanted it to look left, look right, smile, wink, then go back to neutral?
Currently, the buttons are triggering functions that if I were to call them sequentially, it'd try to do them all at once instead of in a sequence. Using the buttons was just to figure out how to get the different individual animations to work. My end goal was to be able to make cute little expressions made up from these individual animations.
Basically, I'm wanting to do something like this and I know it's not the right approach... I don't know what the correct approach would be though, so I'm finding it difficult to get started. I'm assuming some sort of timeline is in order, but I'm not sure how to use the other animations in a combined timeline.
function winkSequence() {
look('left');
blink();
look('right');
look('middle');
mouth('smile');
winkLeft();
mouth('neutral');
}
Here is where I'm at currently...