Intro

In a previous post, I animated an emoji face with CSS animations only. This is a reasonable method if you only need CSS transforms and are getting good results across browsers. However, if you need to do something more complex such as change the path of an line or have a sequence of animations, then it is best to use a Javascript library designed for web animation.

One such library is GreenSock’s GSAP (GreenSock Animation Platform). It is a robust Javascript library that can aspects of an SVG that transforms cannot, like the curvature of paths in SVG elements. It has both free features as well as more advanced features that come with a Greensock Club Membership.

Let’s use GSAP to animate the curvature of of an SVG path. To do this, we will animate the d-attribute, which determines how the path curves. (Reference Chris Coiyer’s CSS Tricks piece.)

Without an animation library, this is how it looks when you click the button. Here, I am just using setAttribute.

What Greensock can help you do is tween the animation, or show a smooth transition from the smile to the open mouth. It does that by interpolating the frames in between the starting and ending frames of the animation. Here is what it looks like with Greensock. However, it doesn't always do this perfectly. Check out the animation below. In the animation that works, there are enough similarities between the starting and ending d-attributes of the mouth path so that Greensock makes an acceptable interpolation. The problematic animation was the one I came up with first. In Inkscape, a path is made up of points called nodes. The more nodes you have, the more complex the path equation is. What I ended up doing was back-tracking to the first mouth I drew in Inkscape and drawing a small mouth expression that was not as drastic a transition to the smile. Here is the code: * I kept the number of nodes the same * Make small incremental changes and test them often. * I avoided rotating the mouth; I only resized it * I would change the control points on the nodes, but I would not reorder the sequence of nodes at all MorphSVG makes this easier, but it is not for free. You can try it on codepen, though. You need to be a member of the "Shockingly Green" subscription, which is $100 per year. For now, I'm fine with counting my nodes.