Shape morphing animations can be awfully cool. They can be artistic and elaborate like the waving cape of a brand character, or simple and understated like video player controls morphing from one state to another. Alexandru-Gabriel Ică digs into doing this in <svg>. There is a fairly big prerequisite to these kind of animations: the shapes need the same number of points. The trick is typically to use a <path d=""> which is capable of drawing anything, then force both shapes to have the same number of points even if you don’t need them all. Alexandru-Gabriel goes deep on this writing script to convert arbitrary paths into morphable shapes, which is the same kind of thing libraries like Greensock do. I love the idea that you can do the morph directly in CSS.
Featured
Staggered Animation with CSS sibling-* Functions
The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.
