Mheetu

Looks like a nice article, I'll give it a more thorough read-through later... Without having read it yet, I am having questions on how to approach the mouth animations which were changed from a labeled Timeline to just a Tween, but the article may provide the information I need to figure that out. I may return with follow-up questions later tonight or tomorrow, depending upon when I get around to reading it. Thanks

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

Hey, thanks for the help! While that works nicely, I'm still curious as to how I would have transitioned between the labels properly... For instance, if I wanted it to go back to neutral before going to a smile or a frown. Also, I've added some eye movements and made the head "float" up and down some. But now, when clicking between the "Look Left" and "Look Right" buttons, the eyes tend to stutter a bit and glitch out. If I remove the floating animation, the eyes work fine... It doesn't matter if I do the head's Y animation using JS or CSS's animation {}. It also leaves little artifacts next the the eyes too. Thanks again!

I've recently found myself wanting to animate SVGs for a few different projects and realized I realized that I've not done it before. In looking to find a good method of handling different sorts of animations, I found GreenSock and have gone over the docs and some of the learning materials, but I seem to be misunderstanding some basic concept... I saw the face example on the MorphSVG plugin and decided to do my own take on it... I've gotten some of it working, but I'd appreciate it if someone could take a look at my CodePen and tell me what I'm doing wrong when trying to animate between a Smile, Neutral, and Frown face. Thanks